Web网页设计-盒子模型
盒子模型就是把页面中的HTML元素看作一个方形的盒子,也可以理解为一个盛装内容的容器。每个盒子都由元素的内容、内边距(padding)、边框(border)和外边框(margin)组成。
盒子模型就是把页面中的HTML元素看作一个方形的盒子,也可以理解为一个盛装内容的容器。
每个盒子都由元素的内容、内边距(padding)、边框(border)和外边框(margin)组成。
边框属性
上边框:border-top-style样式
border-top-width宽度
border-top-color颜色(默认为字体颜色)
右边框:border-right-style样式
左边框:border-left-style样式
none:没有边框
solid:单线
double:双线
dashed:虚线
dotted:点线
内边距属性
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding:上右下左
外边框属性
margin #0px浏览器默认0px
可以为负值
背景属性
background-color:背景颜色
background-image: url(img/he.png);背景图片
background-position:指定背景图片 出现的元素中的位置
background-attachment:可以将背景图像固定
scroll:滚动
fixed:固定
宽高
width: 100px;
height: 100px;
宽度属性和高度属性仅适用于块级元素,对行内元素无效。
特殊的行内元素img和input除外。
透明度
颜色透明度
rgb
rgba
opacity:使任意颜色呈现透明
圆角
border-radius:水平半径参数/垂直半径参数 , 将矩形边框四角圆角化,实现圆角效果。
overflow: hidden;溢出
图片边框
border-image-source:指定图片的路径
border-image-slice:指定边框图像顶部、右侧、底部、左侧向内偏移量
border-image-width:指定边框宽度
border-image-outset:指定边框背景向盒子外部延伸的距离
border-image-repeat:重复出现
阴影
box-shadow:h-shadow v-shadow blur spread color outset(默认);
渐变
background-image:linear-gradient(参数值);样式可以实现线性渐变效果。
像素值/百分比:用于定义形状的水平和垂直半径。
circle:指定圆形的径向渐变。
ellipse:指定椭圆形的径向渐变。
径向渐变
background-image: radial-gradient(circle at center,red,#fff,green);
像素值/百分比:用于定义圆心的水平和垂直半径。
circle at center/left/right/bottom
多背景图像
background-image
修剪背景图像
设置背景图像的大小
background-size:属性值1 属性值2;
像素值:设置一个值,第二个值默认为audo。
百分比:按比例缩放(宽的百分比 高的百分比)。
cover:按图片最大值全部填充覆盖,全部可视化区域填充满,未必显示全。
contain:显示满,未必填充全。
背景图片起始显示位置
background-origin: border-box;
background-clip: content-box;
元素的类型
块元素:每个块元素都会单独占据一行或多行
特点:不会独自占据一行,不可以设置宽度、高度、对齐等属性
作用:用于控制页面中文本样式
常见的块元素:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<il>等
行内元素中有几个特殊的标签。例如:<img>、<strong>、<b>、<em>、<div>、<span>
<div>标记是一个块容器标记
<span>
p*6+Tab键
快速生成6个<p></p>
p.box.box${hhhh$}*4+Tab键
快速生成4个<p class="box box1">hhhh1</p>
.box.box${h$}*4
快速生成4个<div class="box box1">h1</div>
span{行内$}*4
<span>行内1</span><span>行内2</span><span>行内3</span><span>行内4</span>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
background-color: red;
text-align: center;
/* display: inline; */
}
.box{
width: 200px;
height: 100px;
}
.box2,.box3{
display: inline-block;
}
.span{
width: 100px;
height: 100px;
}
.span1{
display: block;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<span class="span span1">行内1</span>
<span class="span span2">行内2</span>
<span class="span span3">行内3</span>
<span class="span span4">行内4</span>
</body>
</html>
相邻块元素垂直外边距的合并(外边距塌陷)
margin-bottom下外边距
margisn-top上外边距
设计一个三角形:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
width: 0px;
height: 0px;
/* padding: 20px; */
/* background-color: red; */
border: 50px solid transparent;
border-bottom-color: red;
}
</style>
</head>
<body>
<p></p>
</body>
</html>
更多推荐
所有评论(0)