发布时间:2024-03-12 17:01
ul li {} //选择 ul下属级别中的所有 li元素。可以多级嵌套: 爷爷级元素 父亲级元素 孙子级元素,每一个层级的元素。
<div class="one">
<p>儿子p>
<a>
<p>孙子 p>
a>
div>
div p {} 或者 .one p {} //后代选择器会选中两个p标签
div>p {} 或者 .one>p {} //子选择器只会选中儿子p标签
,
一个逗号连接就是并集选择器,用于选择多组目标a:link // 选择素有未被访问的链接
a:visited //选择所有已被访问的链接
a:hover //选择鼠标指针位于其上的链接
a:active //选择活动链接(鼠标按下未弹起的链接)
// 一般按照 link visited hover active 的顺序书写代码
input:focus {} //把获取焦点的输入框选取出来
<input type="text" value="请输入用户名">
<input type="text">
input[value] {} //属性选择器: input标签中包含value属性的那个
选择器 | 描述 |
---|---|
E[att] | 选择具有 att 属性的 E 元素 |
E[att=“val”] | 选择具有 att 属性且属性值等于 val 的 E 元素 |
E[att^=“val”] | 选择具有 att 属性且属性值以 val 开头的 E 元素 |
E[att$=“val”] | 选择具有 att 属性且属性值以 val 结尾的 E 元素 |
E[att*=“val”] | 选择具有 att 属性且属性值含有 val 的 E 元素 |
选择器 | 描述 |
---|---|
E:first-child | 从 E 中选择第一个元素 |
E:last-child | 从 E 中选择最后一个元素 |
E:nth-child(n) | 从 E 中选择 第n 个元素 n可以是数字,关键字(even,odd),公式 |
E:first-of-type | 从 E 中选择第一个元素 |
E:last-of-type | 从 E 中选择最后一个元素 |
E:nth-of-type(n) | 从 E 中选择 第n 个元素 |
ul li:nth-child(2n) // n 从0自增,2n表示选出偶数li
ul li:nth-child(n+5) // n 从0自增,n+5 表示从第6个选中到最后
type
和 child
的不同: <div>
<h3>光头强h3>
<p>熊大p>
<p>熊二p>
div>
div p:first-child {} //这样选不到 熊大,因为该选择器的执行步骤是:1.先去找div中的第n个孩子 2.再把这第n个孩子拿去和p匹配一下看能否匹配成功
div p:first-of-type {} //这样就可以选中。因为这个选择器的执行步骤是:1.先把 div中的所有p选出来排序 2.再去找第n个 p
元素显示模式就是元素(标签)以什么方式进行显示,比如 div 独占一行,比如一行可以放多个span
独占一行
高度,宽度,margin,padding都可以控制
宽度默认是父级元素的100%
可以存放行内元素或块元素
注意:
文字类元素内不能使用块元素
注意:
链接里不能再放其他链接 ,但是链接里有时可以放块级元素,需要将链接转换一下模式
display: block; //转换为块元素
display: inline; //转换为行内元素
display: inline-block //转换为行内块元素
background-color: red;
background-image: none或者 url(图片路径); //常用于页面大logo,或者装饰性小图片,优点是便于控制位置
background-repeat: //背景图片的平铺
background-position: //背景图片在盒子里的位置
background-attachment: scroll | fixed //设置背景图像是否固定或者随着页面的其余部分滚动
background: rgba() //设置背景颜色和透明度
复合写法
background: 背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置
text- font- line-
相关的属性行内样式 > ID选择器 > (类选择器=伪类选择器) > 元素选择器 > 继承或者*
border-style | border-width | border-color
border: 1px solid red //简写格式,三者之间没有顺序
border
一样都会影响盒子大小padding: 5px; //1个值表示上下左右都是
padding: 5px 5px; //2个值表示 上下 左右
padding: 5px 8px 10px; //3个值表示 上 左右 下
padding: 5px 2px 7px 10px; //4个值表示 上右下左
//margin可以让块级盒子水平居中,但必须满足两个条件:
//1.盒子必须指定了宽度;2.盒子左右的margin都设置为 auto
//margin的简写规则和 padding 一模一样
让块级元素水平居中只需要设置其左右 margin 为 auto如果想让行内元素或者行内块元素水平居中,只需要给其父元素添加 text-align:center 即可
box-shadow: h-shadow v-shadow blur spread color inset; //前两个必选,后四个可选
值 | 描述 |
---|---|
H-shadow | 必须。水平阴影的位置,可正负 |
v-shadow | 必须。垂直阴影的位置,可正负 |
blur | 可选。模糊距离 |
spread | 可选。阴影的尺寸 |
color | 可选。阴影的颜色 |
inset | 可选。将外部阴影转换为内部阴影。默认为outset |
盒子阴影不占用盒子空间,不会影响排列。
网页布局第一准则:多个块级元素纵向排列找标准流(就是之前学的那些行内元素,块元素),多个块级元素横向排列找浮动。
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘
选择器 {float: 属性值;} // none. left right
如果是正常标准流,两个div应该显示如下:
如果给粉色的那个div增加浮动属性:float:left;
,则显示效果如下:
浮动了之后,粉色div的位置就不保留了,而且粉色的也不属于标准流了,但是蓝色的还是,所以粉色原先那个位置其实是空闲了,粉色漂浮在上面,于是蓝色就填补上去了。
而且浮动的元素是互相紧贴在一起的,没有缝隙。如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
任何元素都可以浮动,不管原先是什么显示模式的元素,添加浮动之后具有行内块元素的特性。
如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,他的大小根据内容来决定。
为了约束浮动元素的位置,我们网页布局一般采取的策略是:
先用标准的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
举个例子:
三个标准流的div应该显示如下:
红色是标准流的,一经把一整行都霸占住了别人都不能用。绿色浮动后,其位置就空出了,下面蓝色的标准流就往上填补。
由于父级盒子很多情况下,不方便给出高度,但是浮动盒子又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。
清除浮动的本质是清除浮动元素造成的影响,如果父盒子本身有高度,则不需要清除浮动。语法:
选择器 {clear: left | right | both}
额外标签法
(推荐)
父级添加overflow属性
父级添加after伪元素
父级添加双伪元素
将盒子定在某一个位置,比浮动更灵活。
定位 = 定位模式 + 边偏移
eg: top: 50px
元素在移动位置的时候,是相对于它的祖先元素来说的
不再占有原先位置
(脱标)平常用的最多的就是:子绝父相
让元素固定于浏览器可视区的位置;主要适用场景:可以在浏览器页面滚动时元素的位置不会改变。
窗口不是全屏,可视窗口的大小也会变化。上图红色区域就是可视窗口
可以看作是相对定位
和固定定位
的混合
在使用定位布局时,可能会出现盒子重叠的情况,此时,可以用
z-index
来控制盒子的前后次序。只有定位的元素才有z-index
属性
选择器 {z-index:1;} //数值可以是正负整数,0,默认是auto,数值越大,盒子越靠上
加了绝对定位的盒子不能通过
margin: 0 auto
水平居中,但是可以通过一下方法实现水平和垂直居中。
position: absolute left:50%
inline-block
<div class="div">div>
<p>wdjawodsndasofasjfsfasp>
.div {
float: left;
width: 300px;
height: 200px;
background-color: pink;
}
可以看到,p标签已经被压住了,但是其中的文字自动往外移,以免被盖住