- 博客(10)
- 收藏
- 关注
RSS订阅原创 vertical用法
vertical-align:设置垂直对齐 有宽度的块级元素居中对齐，是margin:0 auto 让文字居中对齐，是text-align:center vertical-align 垂直对齐，但是他只针对于行内元素或者行内元素 一般用于图片或与文字对齐 vertical-align:baseline | top |middle| bottom 默认是基线对齐，（baseline） 当盒子中放入一个图片，图片会撑大盒子，但是会与下边框有缝隙（浏览器的bug） 清除这个缝隙：可以用vertical-alig
2020-11-19 18:51:57
1879
原创 垂直相邻关系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:both 2:给父元素添加伪类：设置clear:both 3:给父元素添加position，relative或
2020-11-19 18:48:02
681
原创 css权重
权重原则： 1: !important 10000 2: 内联 1000 3：id 100 4；class 10 5: 元素或伪元素 1 6：* 0 7：继承
2020-11-19 18:45:21
65
原创 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不能是static 6：z-index也有负值 7：index遵循拼爹原则
2020-11-19 18:40:10
210
原创 伪类用法
::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详解
background min-width:设置最小宽度 max-width:设置最大宽度 这两种属性设置百分比毫无意义，要设置具体值 font-weight:设值字体加粗 100—300 400–500 600–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
68
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人