- 博客(10)
- 收藏
- 关注
RSS订阅原创 vertical用法
vertical-align:设置垂直对齐有宽度的块级元素居中对齐，是margin:0 auto让文字居中对齐，是text-align:centervertical-align 垂直对齐，但是他只针对于行内元素或者行内元素一般用于图片或与文字对齐vertical-align:baseline | top |middle| bottom默认是基线对齐，（baseline）当盒子中放入一个图片，图片会撑大盒子，但是会与下边框有缝隙（浏览器的bug）清除这个缝隙：可以用vertical-alig
2020-11-19 18:51:57
1880
原创 垂直相邻关系margin塌陷
Document<!-- /* body{ margin: 0px; border: 0px; padding: 0px; } */ /* 外边距合并1 当上下的元素相遇时，margin-top margin-bottom会合并,会取两者种较大的那个值， 解决办法：直接对下面的元素设置margin-top, 这种现象称为上下相邻元素的边距合并， 也叫...
2020-11-19 18:49:58
154
原创 浮动高度丢失及其解决方法
浮动元素：按照流水排列：寻找能最小放下的位置，浮动会半脱离文档流，遮住其他未浮动元素的结构,但不会遮住内容元素都设置浮动，会造成父元素高度丢失解决办法：1：让父级浮动起来，但是会让父级脱离文档流2: 给父级添加 onerflow:hidden 但是不友好3：給父元素设置display:inline-block 类似文本效果BFC方案：1：在浮动元素后添加空白块，clear:both2:给父元素添加伪类：设置clear:both3:给父元素添加position，relative或
2020-11-19 18:48:02
684
原创 css权重
权重原则：1: !important 100002: 内联 10003：id 1004；class 105: 元素或伪元素 16：* 07：继承
2020-11-19 18:45:21
66
原创 nth-child()与nth-of-type()区别
Document // 区别nth-child()会把所有盒子都排列序号执行的时候首先看：nth-child(1)之后回去看前面的div先看数字，再看元素 nth-of-type()会把指定的元素先找到，在从里面按序号选出来 先看类型，再看参数 */ hello wor hello wor hello wor hello wor hello wor h...
2020-11-19 18:43:25
120
原创 定位的注意点
1：行内元素不能设置宽度和高度，当行内元素设置为绝对定位，会丧失一些行内元素性质，可以设置宽高2：一般用子绝父相原则3：父元素设置绝对定位，子元素也设置绝对定位。子元素也会生效。4：定位相同，后写的元素会覆盖在最上面。5：决定叠加顺序，可以用z-index；属性值只有数字，数字越大，就覆盖在最上面，如果z-index值相同，则根据“后来者居上”重叠。使用z-index值必须配合position一起使用，position不能是static6：z-index也有负值7：index遵循拼爹原则
2020-11-19 18:40:10
211
原创 伪类用法
::before::after注意：1：都属于创建一个元素，但是属于行内元素2：新创建的元素在文档树中是找不到的，所以是伪元素3：element::before{}4：两个元素都必须有content属性5：权重为1 Document // 区别nth-child()会把所有盒子都排列序号执行的时候首先看：nth-child(1)之后回去看前面的div先看数字，再看元素 nth-of-type()会把指定的元素先找到，在从里面按序号选出
2020-11-19 18:38:00
60
原创 background详解
backgroundmin-width:设置最小宽度max-width:设置最大宽度这两种属性设置百分比毫无意义，要设置具体值font-weight:设值字体加粗100—300400–500600–900三个范围设置字体，normal表示正常字体，bold表示加粗css里不能进行加减乘除background:设置背景综合属性，有五大属性背景图，背景色 ，重铺，背景定位，随文本滚动(background-attachment:一般不用)复合属性不能写入background-size单
2020-11-19 18:35:49
338
原创 指定某行显示省略号
指定某行显示省略号指定某行显示省略号：多行文本显示省略号，有较大兼容性问题，适合于webkit浏览器:或移动端（移动端大部分是webkit内核）代码：1：overflow:hidden;2：text-overflow:ellipsis;(ellipsis是省略号意思)/* 弹性盒子模型显示*/3：display:-webkit-box;/限制一个块元素显示文本的行数/4：-webkit-line-clamp:2;/* 设置或检索伸缩盒对象的子元素的排列方式*/-webkit-box-
2020-11-19 18:18:52
69
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人