通过使用结构伪类选择器，可以根据元素在HTML中的结构关系查找元素，常用于查找父级选择器中的子元素。
查找第一个子元素，并且为li标签 ,两个条件要同时满足。
要想准确查找子标签中的孙标签
使用伪元素来表示网页中的的非主体内容，他与HTML设置出来的标签不同，伪元素是CSS模拟出来的标签效果
before是在父元素内容最前添加一个伪元素
after是在父元素内容最后添加一个伪元素
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
作用：进行网页的布局，让垂直布局的盒子变成水平布局
属性名：float
属性值：left、right
1.浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
相当于从地面飘到了空中
2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素会受到上面元素边界的影响
5.浮动元素有特殊的显示效果
一行可以显示多个
可以设置宽高
6.浮动元素不能水平居中。
含义：清除浮动带来的影响
影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
原因：子元素浮动后脱标 一不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局
1.直接给父元素设置高度；
与单伪元素清除法不同的是，双伪元素的after用来清除浮动，before用来解决盒子上部margin的塌陷。
直接给父元素添加overflow：hidden
通过使用定位，可以让元素摆放在网页的任意位置，一般用于盒子之间的层叠情况
属性名：position
属性值：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）
①相对定位
相对于自己之前的位置进行移动
代码：position：relative；
②绝对定位
非静态定位的父元素进行定位移动，相对于整个网页来移动的
代码：position：absolute；
③字绝父相
可以让子元素相对于父元素进行自由移动
含义：子元素绝对定位、父元素相对定位
因为相对定位在布局中是占位置的，所以使用相对定位不会使网页的布局变得混乱。
特殊使用：让子元素在父元素中水平居中
④固定定位
他会相对于浏览器进行定位移动，在上下移动中是不会随着网页的移动而移动的，被固定在屏幕中的某一位置。
代码：position：fixed
⑤元素的层级关系
标准流<浮动<定位，
在定位中，绝对、相对、固定的层级相同，但是写在下面的会覆盖掉上面的
如何更改定位元素的层级呢？
属性名：z-index
属性值：数字，数字越大层级越高
用来解决行内/行内块元素垂直对齐的问题，当图片和文字在一行中显示时，他的底部是不对齐的。
还可以用来解决文本框和表单按钮无法对齐的问题、input和img无法对齐的问题、div文本框无法贴顶的问题……
属性名：vertical-align
属性值：baseline（默认、基线对齐）、top（顶部对齐）、middle（中部对齐）、bottom（底部对齐）
设置鼠标光标类型在元素上显示的样式
属性名：cursor
属性值：default（默认）、pointer（小手）、text（工字形）、move（十字光标）
让盒子的四个角变得圆润，增加页面细节，提升用户体验
属性名：border-radius
取值：数字+px、百分比
从左上角开始赋值、没赋值的看对角。
溢出部分指的是盒子内容部分所超出盒子范围的区域。控制内容溢出部分的显示效果，如：显示、隐藏、滚动条…
属性值：overflow
常见取值：
场景：让某元素本身在屏幕中不可见。如：鼠标hover之后元素隐藏
常见属性：
区别：
1.visibility: hidden 隐藏元素本身，并且在网页中 占位置
2.display：none 隐藏元素本身，并且在网页中 不占位置
用于选中超链接的不同状态
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/188077.html