CSS布局-笔记

Cascading Style sheets,层叠样式表;
style属性，是内联样式，就是写在标签里的样式；
外部样式，用link标签的方式引入stylesheet
<link rel="stylesheet" href="./a.css">
总结

内联style属性；
style标签；
外部文件css link
@import url(./b.css);

6. 布局问题，一定要背

给所有的子元素加上float:left;
给子元素的爸爸添加上名为clearfix的类；

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

页面默认字体大小是16px
文字装饰为空，取消下划线
text-decoration: none
使la包裹住a,
display: block
跟随爸爸的颜色；有些元素可以继承，有些不可以，color可以；
color: inherit;
padding顺序是上右下左；
padding: 20px 16px 20px 16px;
块级元素div高度由其内部文档流元素的高度总和决定；
内联元素高度跟字体及字体设计师设置的参数有关；
文档流：文档内元素的流动方向；内联元素从左往右流动，遇到宽度不够换行继续流动；块级元素每个块占一行，一次从上往下；
border调试大法：border:1px solid red;
内联元素很长时默认不会打断，添加word-break:break-all;可以将其打断；
display:inline-block;尽量不用这个，用float;
字体基线对齐；
字体有建议行高；
深入了解，搜索“方应杭 CSS line height”;
height尽量不要写，会有bug；
position: fixed;脱离文档流；相对于屏幕；少用width:100%;
max-width: 940px;最大宽度可以自适应；
margin-left: auto; margin-right: auto;便可自动居中；
span里不能放地div,会出bug；span里加display:block就是div；
position: absolute;相对于祖先中的第一个position: relative;定位；
搜索css tricks shape，图画参考；
iconfont工具网站；
让简历里图标svg上下空出的空间相等；
display:inline;需要后续学习；
content-box与border-box区别
太极图画法：

.yin-yang {
    
    width: 192px;
    box-sizing: content-box;
    height: 96px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 4px 4px 100px 4px;
    border-radius: 100%;
    position: relative;
  }
  .yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 36px solid red;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    box-sizing: content-box;
  }
  .yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 36px solid #eee;
    border-radius: 100%;
    width: 24px;
    height: 24px;
    box-sizing: content-box;
  }

效果图：

6. 布局问题，一定要背

猜你喜欢