WEB Basic基础-04

本文详细介绍了CSS中的尺寸、边框、背景等属性的使用方法及技巧,包括如何设置元素的宽度、高度、边框样式、背景颜色及图像,并解析了框模型的概念及其计算方式。
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;





















评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值