块

宽高：

width 宽度，默认宽度为100%（继承）

hight 高度，自适应父元素内的标签高度

min-width/max-width 最小/最大宽度

min-hight/max-hight 最小/最大高度

line-hight：行高，设置每行的行间距

溢出处理（overflow）：

visible：溢出显示（默认）

hidden：溢出隐藏

auto：没溢出时正常，溢出时滚动

scroll：页面一直显示滚动条

空白处理（white-space）：

nowrap:文本不换行，默认值

warp:文本换行

pre:保留文本的空格和换行符，但是不会溢出换行

pre-warp：保留文本的空格和换行符，但是溢出时换行

pre-line：保留文本的换行符，不保留文本的空格，而且溢出时换行

文本溢出处理（text-overflow）:

clip:默认值

ellipsis:文本溢出时，溢出的部分用省略号显示

边距：

margin（外边距）:

一个值：上下左右

两个值：上下 左右

三个值：上 左右 下

四个值：上 右 下 左

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:左外边距

能用总的margin去设置，就绝不用分的top···去设置

注：body标签默认有8px的外边距属性

外边距重叠问题：

1、出现在上下边距的，左右边距没有，父元素和子元素上下边距重叠

解决方法：

1、在父元素里设置一个border属性（border：1px solid rgb(255,255,255,0) ），缺点多出一个border边框

2、给父元素设置一个overflow，而且是"非" visible ( auto hidden) 缺点:占用overflow属性

3、用伪元素（::before,::after 最前面和最后面）设置一个display:table 块元素

4、父元素设置内边距(padding)，也不会出现边距重叠的问题

padding（内边距）：

一个值：上下左右

两个值：上下 左右

三个值：上 左右 下

四个值：上 右 下 左

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

能用总的padding去设置，就绝不用分的top···去设置

box-sizing（宽高度包含内边距）：

center-box:宽高度不包含内边距，只包含内容区的宽高，默认值

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

注：盒子模型组成：内容区(content)、内边距(padding)、边框(border)、外边距(margin)

边框：

border:四周边框（总的）

border-width 边框宽度

border-color 边框颜色 默认颜色为黑色

border-style 边框样式 solid（实线）常用

border: 1px #rgb(255,255,255,0.5) solid 3个值，顺序随意，但是要用空格隔开

边框宽度 边框颜色 边框样式

border-radius(圆角):

一个值：上下左右角

两个值：左上角和右下角

三个值：左上角，右上角和左下角，右下角

四个值：左上角，右上角，右下角，左下角

px:固定值

百分比：根据元素自身宽高的百分比

注：容器占比还是原来的宽高（四边形）

背景：

background（总的）：

background：blanchedalmond url(练习案例/个人简历静态资源/images/mine-icon.png); no-repeat right bottom

background-image(背景图片):

url(···)：背景图片链接

background-repeat(背景重复):

repeat:背景平铺，默认值

no-repeat:背景不平铺

repeat-x:背景水平平铺

repeat-y:背景垂直平铺

background-size(背景图片大小):

px:固定值

%: x% y% 根据自身比例的宽高

cover:将长的那一边完全填充，另一边等比例伸缩

contain:将短的那一边完全填充，另一边等比例伸缩

background-position(背景位置):

px：固定值

%：x% y% 但是要用空格隔开 (50% 50% 居中)

英文：

center:居中

top:上边

right:右边

bottom:底部

left:左边

行内

1.设置高宽无效

行内块

样式的继承性：

父元素的样式能被子元素继承 line-hight color

开发规范：

1、如果一个双标签中只有一段文字，而且没有子元素，那标签就不能换行

            <div id="app">1111111111</div>

2、如果一个双标签有一段文字，而且还有子元素，那标签就必须换行

            <div id="app">
                1111111111
                <p>abc</p>
            </div>

转义标识符：

        &nbsp：空格
        &copy：版权符号     ©
        &lt：小于符号       <
        &gt：大于符号       >
        &reg：注册商标      ®
        &amp：与符号        &
        &commat:邮箱符号    @