随手记CSS的一些常用技巧

CSS的四种引入方式
1.style属性 内联style属性
2.style标签 内联标签样式
3.link标签 外联样式
4.@import 在CSS文件中引入另一个CSS文件

利用浮动进行布局时都会有bug，解决办法是给浮动元素的父级元素设置一个clearfix类名。
在CSS中写入如下代码：
.clearfix::after{
content: "";
dispaly: block;
clear: both;
}

块级元素的高度是由其内部文档流元素的高度总和决定的。

当一个内联元素元素加了border边框属性，当页面宽度不够时，边框会另起一行却没有分裂开。
效果如下图：

image.png

当输入一段英文字母过长却没有用空格分开时，浏览器会把它当成一个单词，所以不会拆开它，当页面宽度不够时也不会另起一行。
可以通过CSS设置word-break: break-all;解决这个问题。

内联元素的特性:
1，不能设置width和height；
2，多个行内元素排成一行，直到一行排不下，才会换新一行；
3，只可以设置水平方向的边距，如：margin-left,margin-right,padding-left,padding-right.
内联元素的高度是由建议行高和一些字体的设计得到的，无法确定内联元素的高度。

块级元素不到迫不得已不要设置height属性，会有bug，应该由内部的文档流撑开。
块级元素的width设置100%也会有bug，如果设置了内边距，当前元素就会超出父级元素的宽度。

max-width可以设置最大宽度，当窗口宽度大于最大值时，元素的宽度就是设置的最大值，当缩小窗口小于设置的最大宽度时，会实现自适应的效果。

当给子元素设置绝对定位时，记得给父级元素设置上相对定位。