web前端day08学习

盒子模型
简介:所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

具体属性:
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。

宽高设置:
宽高属性适用块元素和替换元素
max-height(width)和min-height(width)有兼容问题ie不支持

边框属性:
1、边框三要素:粗细、线性样式、颜色
注意:
如果颜色不写,默认是黑色。如果粗细不写,不显示边框。如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的边框。

border-style:
none;默认值,没有边框
solid;实线
dotted;点状边框
double;双线


padding属性:(数值不能为负值)
就是内边距的意思,它是边框到内容之间的距离
可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值


外边距(margin):
1、外边距可以让块级盒子水平居中,但必须满足以下两个条件:
(1)盒子必须指定了宽度
(2)盒子左右的外边距必须都设置为auto,以下三种都可以:
margin-left:auto; margin-right:auto;
margin:auto;
margin:0 auto;

2、当上下相领的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距取两个值中的较大者。
解决方案:尽量只给一个盒子添加margin值。

3、嵌套块元素垂直外边距的塌陷
定义:对于两个嵌套关系(父子关系)的块元素,父元素有上外边距,同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

4、行内元素和行内块元素水平居中的方法是:给其父元素添加 text-align:center


总结:
盒子的大小 = content + border + padding + margin

盒子的可见框宽度=border-left-width + padding-left + width + padding-right + border-right-width

盒子的可见框高度=border-top-width + padding-top + height + padding-bottom + border-bottom-width

display属性:
none;此元素不会被显示
block;此元素显示为块级元素,此元素前后会带有换行符
inline;默认此元素会被显示为内联元素,元素前后没有换行符
inline-block;行内块元素,元素呈现为inline,具有block相应特性


样式继承关系:
padding 不继承
margin 不继承
birder 不继承

 

CSS背景和列表

1、背景样式;
background-color 设置元素的背景颜色
background-image 把图像设置为背景颜色
background-position 设置背景图像的起始位置
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
background-repeat 设置背景图像是否重复及如何重复
background 简写属性,用作是将背景属性设置在一个声明中

常见属性用法:
background-color:transparent
transparent表示全透明黑色的速记法类似rgba(0,0,0,0)这样的值
且背景区包括内容,内边距(padding)和边框、不包含外边距(margin)

background-image
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距
默认的,背景图片位于元素的左上角,并在水平和追至方向上重复

background-repeat
常见的属性值:
repeat重复
no-repeat不重复
repeat-x水平重复
repeat-y垂直重复

background-attachment:scroll | fixed

说明:
scroll默认值,背景图片随滚动条滚动
fixed当页面其余部分滚动时,背景图片不会滚动


background-position:百分比|值也可以写top right 。。。。

背景缩写;
语法:
各值之间用空格分割,不分先后顺序

 


2、列表样式
list-style-type 设置列表项标志的类型
list-style-image 将图像设置为列表项标志
list-style-position设置表中的列表项的标志位置
list-style简写属性。用于把所有的列表的属性设置于一个声明中


list-style-position:inside | outside
inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐
outside:默认值,列表向目标记放置在文本以外,且环绕文本不根据标记对齐

列表样式缩写:
值之间用空格分隔
顺序不固定
注意:
list-style-image会覆盖list-style-type的设置

 

上一篇:day08.网页布局基础、网页布局案例


下一篇:小渣渣学习笔记 python day08