CSS 基础 笔记3

CSS 基础 笔记

Author : 朱盟 |吃火星的宝宝
TIME: 2019/5/30 学习的第4天
GIT HUB ： embaobao https://github.com/embaobao/EM
Email:1132067567@qq.com
CSDN： https://blog.csdn.net/embaobao
博客园： https://www.cnblogs.com/embaobao/

CSS 盒子模型

边框
内边距
外边距
内填充和外边距是根据元素来说的
盒子的大小会随着边框、内边距、增加增加，但是宽高的存储内容大小没变
padding 加在父元素上来控制子元素
margin 加在子元素控制本身外边距
margin 不会拥有盒子的背景
*margin值的解析：左右边界累加，正常文档流的上下边界重合。
*在正常文档流下，子元素（块）直接写margin-top时，会将margin-top属性值加上父元素身上,(子元素或父元素不设置任何浮动及定位的属性，或父元素不设置边框的情况下。)

所以当父元素没有边框时，且子元素父元素没有定位，没有浮动 ，子元素给自己加magrgin-top 他会让父元素拥有给子元素的margin-top而子元素加不上 ,那怎么办了？怎么能不浮动，且我想加载子元素的本身的外边距？

1. overflow:hidden; 可以解决

---

css 选择器 交集选择器 选择器选择器
ex: ul.clss1
交集选择器的权重也是相加
当权重相同时后者会覆盖前面的哦

盒模型是页面布局的基石，他决定了元素如何显示，及元素的关系

宽度 width + border2+ padding(left + right )
高度 height + border2+ padding(top + bottom )

怪异盒模型/IE盒子模型组成：margin+内容区

图片一般存jpg
png 大 但是需要透明时，只有PNG、gif 的可以

单一颜色的 最好存 png 8位，区别不大;
颜色丰富，或者较大的最好是24位或以上。否自会有锯齿。
gif:支持动画 。

IE 会给放在A标签的图片里加蓝色边框，所以默认去掉边框。
img{ border:none;}
tip : h3自带font-size :1.17em; H3、h4 有默认行高。 可以body {line-height:1em ;}
图片也会有底部间距 盒子会被默认撑开一些有间隙，可设置盒子的宽高来删除间隙。

 *{margin: 0;padding: 0;  }/*清除默认间距*/  
body {line-height:1em ;}/*清除有默认行高*/  
a{text-decoration: none;}/*清除a标签下划线*/  
li{list-style: none;}/*清除列表图标*/   
img{border:none;}/*清除IE A 标签下图片有默认边框*/

先写结构，再写样式。
样式先确定基本的字等基础的样式

border-style:dotted solid double dashed;

上边框是点状
右边框是实线
下边框是双线
左边框是虚线

a 是内联元素 在解析margin 是会有问题
上下边距 内填充都不支持。span 也是的。