想提升css,前端开发-css提升

小知识点：body与页面四周有个天生的8像素距离，所以里面的标签不写位置的时候会看到与边界有缝隙，想要无缝，设置*{margin:0;}即可

一、盒模型-内外边距(padding、margin)、边框border、宽width、高height

二、层模型

1、position:absolute

脱离原来位置进行定位，原来的层级就不保留它原来的位置了

相对于最近的有定位的父级进行定位，如果没有那么相对于文档进行定位

2、relative:保留原来位置进行定位

相对于原来的位置定位

对元素定位：用relative做参照物，absolute定位

3、fixed:广告定位，不随着页面滚动而滚动

div{

/*相对于文档居中-如果是fixed就可以实现窗口居中定位*/

position: absolute;

left: 50%;

top: 50%;

width: 100px;

height: 100px;

background-color: red;

margin-left: -50px;

margin-top: -50px;

}

三、两个经典的bug

1、父子级都设置垂直方向的margin的时候，父子元素是结合到一起的，只有当子级元素margin大于父级的时候才会有效果，并且带着父元素一起移动，就是说无论你怎么设margin-top，子元素与父元素top之间也不会有距离

margin塌陷

解决办法

1)父级加个边框：border:1px solid black;

确实能解决问题，但一般不这么做

2)bfc(block format context)块级格式化上下文

css认为每一个标签都是一个盒子，每个盒子有自己的渲染规则，bfc可以改变某些盒子的渲染规则

如何触发一个盒子的bfc:

position:absolute;

display:inline-block;

float:left/right;//浮动布局

overflow:hidden://溢出部分隐藏

虽然能解决问题，但是会带来一些新的影响，实际开发中根据需要自行选择

2、兄弟元素在垂直方向的margin问题

margin合并

同样也可以用bfc来解决这个问题

一般这种问题可以不解决，设置某一个的margin即可

3、float:left/right(可实现图文混排环绕)

如果所有元素都是浮动，可以让元素从左或从右站队

如果只是某一个元素是浮动的，它就产生了浮动流

所有产生了浮动流的元素，块级元素看不到他们(块级元素会占有他们原来的位置，覆盖，类似层模型)

产生了bfc的元素和文本类型属性的元素(inline)以及文本都能看到浮动元素(也就是不会覆盖)

如果子元素都是浮动元素，父级是块元素，会造成块元素包不住浮动元素的情况

1)只需要加个

标签，设置clear:both(块级元素才能使用)就能清楚所有浮动效果，让子元素将父元素自适应撑开

这种会改变原来的页面结构，不建议2)另一个知识：每一个标签都有伪元素，有前后两个，使用双冒号可以用css改变它的样式，可以跟正常元素一样使用，只不过平常看不见

伪元素天生都是行级元素

span::before{

content:"前伪元素";

clear:both;/*块级元素使用才有效果*/

display:block;

}

span::after{

content:"后伪元素";

}

3)只要父级元素触发了bfc、或者是文本类型、浮动类型都可以包住浮动元素

凡是设置为position:abolote;float:left/right;的元素，系统会从内部把它转换成inline-block,宽高就不由内容决定了，可自行设置

四、css补充知识

1、文字溢出容器，要显示点点点

单行文本溢出处理

多行做文字截断即可

2、网络不好时的处理

网络不好会优先加载html，所以要保证没有css的情况下html也能展现内容

还可以利用padding不能显示文字的特性来处理

行级元素只能嵌套行级元素

块级元素能嵌套任何元素

标签虽然是块级元素，但是不允许嵌套

,否则会被拆分成两个

标签

标签不能嵌套标签

3、一旦一个文本类元素或者行级块元素包含内容文字，外面的文字就会跟内部文字底对齐，而不是跟元素底部对齐

span{

display:inline-block;

width:100px;

height:100px;

background-color:red;

font-size:50px;

vertical-align:middle;/*中线对齐，也可以写数值更改对齐线*/

}

4、三大特性

4.1继承性

4.2层叠性

4.3优先级