CSS（day02）

尺寸和边框

尺寸属性

① 作用

设置元素的宽度和高度

② 属性

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

取值：px 为单位的数字 和 父元素的百分比

注意: 如果不写宽高默认的宽高是, 各个元素的宽是多少？

块级元素不写宽, 默认宽度占父元素的 100%

块级元素不写高, 默认高度靠内容撑起来

行内元素, 设置宽高无效。它的宽高靠内容撑起。 img

自带宽高属性的元素 可以设置宽高

附加点 1. 单位

1. 单位：

   px 像素
   in 英寸 1in = 2.54cm
   pt 磅值 1pt=1/72in （多用于设置字体大小）
   cm 厘米
   mm 毫米

   项目中为了在 pc pad phone 都正常显示我们一般会使用相对单位

   em 以父元素的数值作为基本单位
   rem 以 html 的数值为基准单位
   %

2. 溢出处理

   当内容较大, 元素较小的时候, 就会发生溢出效果, 默认是纵向溢出

   overflow 取值:

   visible 默认值, 溢出部分可见
   hidden 溢出部隐藏
   scroll 不管是否溢出, x 和 y 轴方向都添加滚动条
   auto 只有溢出才有滚动条, 不溢出不显示

   overflow-x 设置水平轴滚动条
   overflow-y 设置垂直轴滚动条

   
   

   如何设置成横向溢出

   内部容器的宽度大于外部容器的宽度

3. 颜色（颜色的合法值）

   1、颜色的预定义 red blue gray orange pink seagreen …

   2、#RRGGBB 6位十六进制的数字 代表 RGB　每一位代表　00~ff 0~255

   3、常用颜色: #f00 #0f0 #00f #ff0 #f0f #faa

   4、rgb(r,g,b) 十进制, rgb 0~255

   5、rgba(r,g,b,alpha) alpha 0~1

边框

① 边框的简写方式

border: 2px solid red;
语法：border: [width] [style] [color]

[style] solid 实线 | dotted 点线 | dashed 虚线 | double 双实现

[color] 合法的颜色值和 transparsent[等同于rgba(0, 0, 0)] 全透明

最简方式: border: solid;

② 边框的单属性定义

border-color:
border-style: 边框中只要写了 style 属性就会显示边框
border-width:

③ 单边定义

border-top / border-right / border-bottom / border-left

④ 单边的单属性

border-*-color / border-*-width / border-*-style

*: top / right / top / left

边框的倒角（圆角）

border-radius:

取值: px 为单位的数字 / % 50% 是一个正圆

单角设置

border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:

边框阴影

box-shadow
取值: h-shadow / v-shadow / blur / spread / color / outset | inset;

h-shadow 水平方向的阴影偏移

v-shadow 垂直阴影偏移

blur 阴影模糊距离

spread 阴影尺寸

color 阴影颜色

轮廓

在边框外为的一圈, 被成为边框的边框

outline: [width] [style] [color];

去除轮廓,

border: none/0; 去除轮廓
outline: none/0; 去除边框

盒子模型（框模型）

元素在页面上实际占地空间的一种计算方式

浏览器默认元素实际占地宽度

margin-left + border-left + padding-left + width + padding-right + border-right margin-right

浏览器默认元素实际占地高度

margin-top + border-top + padding-top + height + padding-bottom + border-bootom + margin-bottom

外边距（margin）元素与元素之间的边距
内边距（padding）边框与内容区域之间的距离

1. 外边距（margin）

   margin: v1; 设置 上、右、下、左所有的方向都是 v1
   改变 margin, 元素有位移效果
   在页面元素做位置微调的时候, 使用 margin

设置单方向外边距

magrin-* -> top / right / bottom / left

取值

1、以 px 为单位的数字

2、% 是父元素宽度的 百分比

3、值取负数, margin-top 正直↓ 负值↑
margin-left 正直→ 负值←

4、auto: 对上下外边距无效 自动计算块级元素的左边距让块级元素水平居中, （只对设置宽度的元素有效）

简写方式

margin: v1; 设置四个方向

margin: v1 v2; v1上下 v2左右 margin: 0 auto; margin: auto;

margin: v1 v2 v3; 上 左右 下

margin: v1 v2 v3 v4; 上 右 下 左

2. 外边距的特殊效果
   ① 外边距的重叠

   两个垂直外边距相遇时, 他们会合成一个, 值以最大的为准
   解决方法: 布局设计时, 直接进行规避

   ② 外边距溢出
   在特殊情况下为子元素设置上外边距会作用在父元素上
   特殊情况

   1、父元素没有上边框
   2、子元素的内容区域的上边沿与父元素的内容区域的上沿重合

   解决方案：

   1、给父元素添加上边框 弊端: 影响了父元素的实际占据高度

   2、给父元素添加上内边距 弊端: 影响了父元素的实际占据高度

   3、在子元素之前添加一个空的 table 元素

   ③ 关于块级元素、行内元素、行内的总结（必须特别熟悉）
   行内元素的特点

   (设置宽高无效, 宽度根据内容撑开, 上下外边距无效, 左右外边距有效, 可以与其他行内元素和行内块元素共用一行, 一行放不下, 再折行)

   块级元素的特点（input）

   （设置宽高有效, 如果不设置宽, 宽是父级的 百分百（100%）如果不设高度, 高度靠内容撑开 4 个方向上的外边距都有效独占一行）

   行内块元素

   （设置宽高有效, 但是自带一个默认的宽高, 4个外边距都有效, 但是同一行修改一个行内块的垂直外边距, 整行都会跟着一起发生位置改变, 可以与其他行内块和行内元素共用一行）

   ④ 自带外边距的元素

   hn p body ol ul dl pre 由于不同的浏览器的外边距的解析可能会有差别
   所以再写样式之前, 一般会将内外边距清零, 这个行为叫做 css rest
   * {margin: 0; padding: 0;}

3. 内边距（padding）

   改变 padding, 感觉上改变了元素的大小
   改变 padding 不会影响 其他元素的, 只会改变当前元素自己的实际占地大小尺寸

   padding: v1; 设置 4 个方向 内边距
   padding: v1 v2; 上下 左右
   padding: v1 v2 v3; 上 左右 下
   padding: v1 v2 v3 v4; 上 左 右 下

   取值 padding-*: top right bottom left

   px / % / padding 没有 auto