林圈圈学习记录

CSS

一.css概念

1.美化html的页面

2.层叠样式

二.css引入方式

1.内联式  /行内样式

2.内联/内部式

3.外联式

三.选择器

1. 基础选择器
        通配符选择器
        标签选择器
        类选择器
        id选择器
2.  复合选择器
        后代选择器
        子元素选择器
        并集选择器

 

四.字体设置
  1.  字体样式
        font-family 
            字体样式  微软雅黑  Microsoft Yahei、宋体
            可以连续添加几个，会根据顺序读取，若当前浏览器没有安装该字体，会读取下一个  
   2. 字体大小
        font-size
              一般默认大小为16
    
 3.       字体粗细
            font-weight
            normal正常 ；bold粗  ；bolder特粗 ；lighter细体；
            100-900 数字  不加单位
    font-style  normal  italic 斜体
4.    字体颜色
        英文单词
        十六进制
        rgb()
5.    文本下划线
        下划线  删除线 上划线 
        overline  line-through 
    文本缩进
        text-indent:
            px ：一个像素大小
            em：em相当于当前元素1个字符的像素大小
    行间距
        line-height         

五.继承
    文本属性 text
    文字属性 font
    lits-style列表样式
    块级元素，子元素的官度 默认为父元素的官度    

六.拓展：元素转换
    display:block; 设置为块级元素
    inline -  设置为行内元素
    inline-block   设置为行内块元素

七.清除浮动：额外标签法 
    给父元素overflow：hidden
    父级添加after伪元素
    父级添加双伪元素，用的最多

八.浮动
    脱离标准文档流，下面文档流的内容会顶上 占有它原本的位置
    不会覆盖文字；会覆盖其他内容
    一浮全浮
九 .盒子模型（content）
    padding
        内边距的值，会把我们的元素撑大
            复合型写法
                如果复合型写法的值是四个，那么顺序为：上  右  下  左 顺时针方向旋转赋值
                如果复合型写法的值是三个，那么顺序为：上  左右  下    方向赋值
                如果复合型写法的值是两个，那么顺序为：上下  左右    方向赋值
                如果复合型写法的值是一个，那么顺序为：上下左右    方向赋值
    border
        边框
            复合型写法：border: 10px solid rgb(117, 184, 247);
                第一个值是边框宽度
                第二个值是边框样式（虚线、实线、点线、双实线等）
                第三个值是边框颜色
                这三个值无顺序，先写哪个都行 
    margin
        外边距 
            复合型写法： margin的复合型写法同上，和内边距一样
    块级元素水平居中 
        盒子必须指定宽度
        盒子左右设置为：margin: 0 auto;
    外边距合并问题 
        两个相邻元素设置外边距，不会相加，会以较大的一方的外边距作为他们之间的外边距
    嵌套盒子的垂直外边距塌陷问题
        给父元素添加上内边距
        给父元素添加上overflow: hidden;
        给父元素添加上上边框