css概述二

四.尺寸和边框

1.尺寸属性

①作用

设置元素的宽度和高度

②属性

width:宽度

max-width:最大宽度

min-width:最小宽度

height：高度

max-height:

min-height

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

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

1.块级元素不写宽，默认宽度占满父容器宽度100%

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

3.行内元素，设置宽高无效。它的宽高靠内容撑起。

4.自带宽高属性的元素，设置宽高有效（img,table）

附加知识点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 设置垂直轴滚动条

如何设置成横向溢出

内部容器，设置宽度，大于外部容器的宽度

附加知识点，颜色合法值

1.颜色的英文单词  red

2.#rrggbb  6位16进制的数字   代表rgb  每一位0~ff  0~255

3.#aabbcc--->#abc  #ff0000--->#f00

常用颜色 #f00  #0f0  #00f  #ff0  #0ff #f0f

#ddd  #666  #333  #e8e8e8

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

5.rgba(r,g,b,alpha) alpha0~1

6.hsl 不记

3.边框

①边框的简写方式

border:width style color;

border:2px solid red;

style：solid 实线

dotted 点点虚线

dashed 断线虚线

double  双实线

color：合法的颜色值和transparent[等同于全透明]

最简方式

border:style;

②边框的单属性定义

border-color:

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

border-width:

③单边定义

border-top:width style color;

border-right

border-bottom

border-left

④单边的单属性定义

border-*-color

border-*-width

border-*-style

*:top/right/bottom/left

3.边框的倒角(圆角)

border-radius:

取值：以px为单位的数字

%  50%是一个圆形

单角设置
border-top-left-radius:

border-top-right-radius:

border-bottom-left-radius:

border-bottom-right-radius:

4.边框的阴影

box-shadow:

取值：h-shadow v-shadow blur spread color inset;

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

v-shadow 垂直方向的阴影偏移

blur 阴影模糊距离

spread 阴影尺寸

color 阴影的颜色

inset/outset  设置内部阴影和外部阴影

5.轮廓

在边框外围的一圈线条，被称为边框的边框

outline:width style color;

去除轮廓，去除边框

border:none/0;

outline:none/0;

五.框模型，盒子模型

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

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

左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距

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

上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

外边距margin：边框以外的距离，元素与元素之间的距离

内边距padding：边框与内容区域之间的距离

1.外边距margin

margin:v1;设置上右下左4个方向外边距

改变margin，元素有位移效果。

在页面元素做位置微调的时候，使用margin

设置单方向外边距

margin-top:10px;

margin-right:20px;

margin-bottom:30px;

margin-left:40px;

取值：

1.以px为单位的数字

2.%  是父元素宽度的%

3.值取负数， margin-top  + ↓   - ↑

margin-left  + →  - ←

4.auto：对上下外边距无效

自动计算块级元素的左右外边距

让块级元素水平居中，（只对设置了宽度的块级元素生效）

简写方式

margin:v1;   设置4个方向

margin:v1 v2;   v1设置上下    v2设置左右

margin:0 auto;/margin:auto;

margin:10px auto;

margin:v1 v2 v3;  上    左右    下

margin:v1 v2 v3 v4;  上右下左

2.外边距的特殊效果

①外边距的合并

两个垂直外边距相遇时，他们将合并成一个

值以大的为准。

解决方法：布局设计的时候，直接规避

②外边距溢出

在特殊情况下，为子元素设置上外边距，会作用到父元素上！

特殊情况

1.父元素没有上边框

2.子元素的内容区域的上边沿与父元素的内容区域的上沿重合

解决方案：

1.给父元素添加上边框

弊端：影响了父元素的实际占地高度

2.给父元素添加上内边距

弊端：影响了父元素的实际占地高度

3.在子元素之间添加一个空的<table></table>

③关于块级元素，行内元素，行内块的总结(必须特别熟悉)

行内元素的特点

设置宽高无效，宽高根据内容自动撑开

上下外边距无效，左右外边距有效

可以与其它行内元素和行内块元素共用一行

一行放不下，再折行

块级元素的特点

设置宽高有效，如果不设置宽，宽度是父级宽度的100%

如果不设置高度，高度靠内容撑开

4个方向外边距都有效，独占一行

行内块元素   input

设置宽高有效，但是自带一个默认的宽高

4个外边距都有效，但是同一行修改一个行内块的垂直外边距，整行都会跟着一起发生位置改变。

可以与其他行内块和行内元素共用一行

④自带外边距的元素

h1~h6  p  body  ol  ul  dl  pre

由于不同浏览器对默认的外边距的解析可能会有差别

所以在写代码之前，一般会把内外边距清空。这个行为叫做css reset

*{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:

padding-right:

padding-bottom

padding-left

取值：以px为单位的数字

%

padding没有auto