2022年7月18日 第二周课堂笔记 CSS语法基础

块元素:

宽高：

width:默认100%        height:默认被内容撑起

min-width/max-width：最小/最大宽度        min-height/max-height：最小/最大高度

line-height：行高,每行的高度,行内文字垂直居中

边距:

外边距margin：

一个值：上下左右      二个值：上下，左右      三个值：上，左右，下      四个值：上，下，左，右

margin-top/magin-right/margin/margin-botto0m/margin-left：能用总的margin,就不要用分的-top...

外边距重叠问题：

1.出现上下外边距，左右没有

2.设置overflow为非visible，缺点,占用overflow属性

3.用伪元素(::before ::after)设置一个table

溢出处理：

overflow

visible：默认值,溢出提示        hidden：溢出隐藏        auto：每溢出正常,溢出时滚动

内边距padding：

1.父元素设置了内边距,也不会出现外边距重叠问题。

padding(-top -left....)1234个值跟外边距对应

 

宽高包含内边距：

box-sizing：

        content-box：默认值，宽高不包含内边距和边框，只是内容去的....

border-box：宽高包含内边距和边框

边框：

border-width：边框宽度        border-color：边框颜色        border-style：边框样式

border：三个值，顺序随意，空格隔开就好        solid：实线

border-radus：圆角

             px：

             百分比%：相对于自身宽高的百分比

             注：容器占比还是原来的宽高

空白处理：

white-space

        wrap：默认值，换行

        nowrap：不换行

        pre：保留文本的空格和换行符，文字溢出不换行

        pre-wrap：保留文本的空格和换行符，文字溢出换行

        pre-line：保留换行，不保留

转义标识符：

        &nbsp：空白

背景图片：

background-repeat

        no-repeat：不平铺

        repeat：平铺

        repeat-x：水平平铺

        repeat-y：垂直平铺

background-size

        px：

        百分比%  X%  y% 相对于容器的宽高

        cover：将长边完全充满，另一边保持比例伸缩

        contain：将短边完全充满，另一半保持比例伸缩

 backgroud-position:x y 偏移

        px：

        百分比%   相对于容器的宽高

方位：

        center

        bottom      

        left

        right

        top

文字溢出处理：

        text-overflow：ellipsis 省略号隐藏

        clip：默认值，直接溢出

background-color>image>position>size>repeat