WEB Basic基础-04

1、尺寸 和 边框


1、尺寸属性


1、作用


改变元素的宽度和高度


2、属性


1、宽度


属性：width


取值：以px或%为单位的数值


2、高度


属性：height


取值：以px或%为单位的数值






所有块级元素的尺寸：


宽度：占父元素100%的宽


高度：以内容为准






所有行内元素的尺寸：


宽度：以内容为准


高度：以内容为准






注意：


html 和 css 中，除img以外的所有行内元素的尺寸是不允许修改的


3、溢出处理


1、什么是溢出


当使用尺寸属性限制元素尺寸时，如果内容所需要的空间大于元素的尺寸的话，则产生溢出的效果


2、溢出处理的属性


属性：overflow


取值：


1、visible


可见的，默认值


2、hidden


溢出的内容会隐藏


3、scroll


显示滚动条，溢出时滚动条可用


4、auto


自动，溢出时产生滚动条并可用


2、边框属性


1、边框实现


1、边框的简写方式


通过一个属性完成四个方向边框的所有效果设置(宽度，样式，颜色)


属性：border


取值：width style color


width:边框的宽度，以px为单位的数值


style:边框的样式


solid:实线


dotted:虚线(点)


dashed:虚线(线)


color:边框的颜色


取值为合法的颜色值


可以取值为 transparent(透明)


特殊用法：


border:none;


2、单边定义


定义某一条边框的宽度，样式，颜色


属性：border-方向:width style color;


方向：top / bottom / left / right


ex:


上边框3px 实线 蓝色


border-top:3px solid blue;


3、单属性定义


设置四个方向边框的某一个属性值


语法：border-属性:值;


属性：width / style / color


ex:


1、设置四个方向的边框尺寸为 5px


border-width:5px;


2、设置四个方向的边框颜色为 pink 色


broder-color:pink;


4、单边单属性定义


设置某一方向边框的某一属性值


属性：border-方向-属性:值;


方向：top / bottom / left / right


属性：width / style / color


ex:


1、下边框的样式为虚线(点)


border-bottom-style:dotted;


2、右边框的宽度为 3px


border-right-width:3px;


3、左边框的颜色为 红色


border-left-color:red;


2、轮廓


outline:none;


3、边框倒角


1、作用


将边框的四个直角变为圆角


2、语法


属性:border-radius


取值:


1、以 px 为单位的数值


2、以 % 为单位的数值 - 50%


4、边框阴影


属性：


box-shadow:h-shadow v-shadow blur spread color;


h-shadow:阴影的水平偏移距离


取值为数字


取值为正，阴影向右偏移


取值为负，阴影向左偏移


v-shadow:阴影的垂直偏移距离


取值为数字


取值为正，阴影向下偏移


取值为负，阴影向上偏移


blur:阴影的模糊大小


取值为数字


数字越大越模糊


spread:阴影的大小


取值为数字


color:阴影的颜色


2、框模型 - Box Model


1、什么是框模型


框：页面元素皆为框


框模型：定义元素的尺寸和距离的一种计算方式


Box Model ：盒模型，方框属性


包含：尺寸，边框，外边距 和 内边距






当框模型属性介入到元素时，元素的整体占地尺寸会发生改变，计算方式如下：


占地宽度=左右外边距+左右边框+左右内边距+宽


占地高度=上下外边距+上下边框+上下内边距+高


2、外边距


1、什么是外边距


围绕在元素边缘之外的空白距离就是外边距


外边距是不允许被其他元素占据的


2、语法


1、属性


1、margin


最多能够设置四个方向的外边距值


2、margin-top


上外边距的值


3、margin-right


右外边距的值


4、margin-bottom


下外边距的值


5、margin-left


左外边距的值


2、取值


1、以 px 为单位的数字


ex：做外边距的值为20px


margin-left:20px;


2、以 % 为单位的数值


以父元素尺寸的占比作为外边距的值


3、取值为 负数


目的是为了移动元素


元素设置上外边距为正数，元素下移


元素设置上外边距为负数，元素上移






元素设置左外边距为正数，元素右移


元素设置左外边距为负数，元素左移


4、取值为 auto


自动：自动计算左右外边距的值


注意：


1、auto只能应用在左右外边距上，上下无效


2、只能为设置宽度的块级元素设置左右外边距为auto，目的是为了让块级元素水平居中


3、margin的简介写法


1、margin:value;


value表示的是上下左右四个方向的外边距值


ex:


margin:10px;


2、margin:v1 v2;


v1 : 表示上下外边距的值


v2 : 表示左右外边距的值


ex:


margin:0px auto;


3、margin:v1 v2 v3;


v1 : 表示上外边距的值


v2 : 表示左右外边距的值


v3 : 表示下外边距的值


ex:


margin:5px auto 3px;


4、margin:v1 v2 v3 v4;


v1 : 上外边距


v2 : 右外边距


v3 : 下外边距


v4 : 左外边距


3、页面中具备外边距的元素


body,p,h1~h6,ul,ol


以上元素都具备默认的外边距


CSS重写：通过元素选择器将标记的默认样式改掉


3、内边距


1、什么是内边距


内容与元素边缘之间的距离


注意：内边距会扩大元素边框的所占区域


2、语法


属性：


padding:四个方向的内边距值


padding-top/right/bottom/left:值;


取值：


1、以 px 为单位的数值


2、以 % 为单位的数值


简洁写法：同margin


padding:value; 上下左右


padding:v1 v2; 上下  左右


padding:v1 v2 v3;上  左右  下


padding:v1 v2 v3 v4;上 右 下 左


3、页面中具备默认内边距的元素


1、ul,ol


2、文本框，密码框，按钮


4、box-sizing


1、作用


指定框模型(尺寸，边框，内边距)的计算方式


2、语法


属性：box-sizing


取值：


1、content-box


默认值，元素的width和height，只规定到元素的内容区域的宽和高。内边距和边框的尺寸是需要额外计算再附加到当前元素上的。


div{


width:300px;


height:40px;


border:1px solid #000;


padding:1px 12px;


box-sizing:content-box;


}


内容宽度：300px


内容高度：40px


左右边框：各1px


上下边框：各1px


左右内边距：各12px


上下内边距：各1px


整体宽度：326px


整体高度：44px


2、border-box


元素的width 和 height，能够规定到元素的边框，内边距 以及 内容尺寸的。


width=边框宽度+内边距+实际内容宽度


height=边框宽度+内边距+实际内容高度


div{


width:300px;


height:40px;


border:1px solid #000;


padding:1px 12px;


box-sizing:border-box;


}


整体宽度：300px


整体高度：40px


左右边框：各1px


上下边框：各1px


左右内边距：各12px


上下内边距：各1px


实际内容宽度：274px


实际内容高度：36px


3、背景属性


1、背景颜色


属性：background-color


取值：合法的颜色值


注意：背景颜色是从边框的位置处就开始绘制


2、背景图像


属性：background-image


取值：url("图片路径")


3、背景平铺


属性：background-repeat


取值：


1、repeat


默认值，横纵都平铺


2、no-repeat


不平铺


3、repeat-x


横向平铺


4、repeat-y


纵向平铺


4、背景图片尺寸


属性：background-size


取值：


1、width height


以px为单位的数值


2、width% height%


采用当前元素的尺寸占比作为背景图尺寸


5、背景图片位置


1、作用


改变背景图在元素中的默认位置


2、属性


属性：background-position


取值：


1、x y


以 px 为单位的数值，用空格隔开


x ：背景图像水平偏移距离


取值为正，背景图向右偏移


取值为负，背景图向左偏移


y ：背景图像垂直偏移距离


取值为正，背景图向下偏移


取值为负，背景图向上偏移


2、x% y%


1、0% 0%


背景图在左上角


2、100% 100%


背景图在右下角


3、50% 50%


背景图在中间


4、95% 0%


偏右，靠上


3、关键字


x ：left / center / right


y ：top / center / bottom


6、背景属性 - 简写方式


属性：background


取值：color url() repeat position;


ex:


background:red;


background:url(a.jpg) no-repeat 95% center;