WEB安全 DIV CSS基础2
11.盒子模型
盒子模型的组成部分
外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性
自身的身高 width height
内边距 padding
盒子边框 border
与其他盒子的距离 margin 外边距
<style>
.demo9{
margin: 10px;/* 外边距 */
border: 1px solid red;/* 盒子边框颜色 */
padding: 50px;/* 内边距 */
width: 80px;/* 宽度 */
}
</style>
12.Border 边框
常见的写法 border:1px solid #foo;
单独属性:
border-widh:
border-style:
dotted 点状虚线
dashed（虚线）
solid（实线）
double（双实线）
border-color(颜色)
<style>
.demo10{
border-width: 5px;
border-top: dotted;
border-bottom: dashed;
border-left: solid;
border-right: double;
border-color: rebeccapurple;
width: 500px;
height: 500px;
}
12.1margin（内边距） padding（外边距）
padding:内边距
值：像素/厘米等长度单位、百分比
padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）
单独属性
padding-top:
padding-right:
padding-bottom:
padding-left:
当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小
margin 外边距
值：与padding相同
单独属性：与padding相同
外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并
margin
margin:10px 上下左右都会腾出10px出来
margin:0px auto; 居中
<style>
.demo11{
width: 400px;
height: 400px;
border: 1px solid red;
margin: auto;
margin-bottom: 50px;
text-align: center;/* 内容居中 */
/* padding:10px; 上下左右
padding:10px 10px; 上下 左右
padding:10px 10px 10px; 上 左右 下
padding:10px 10px 10px 10px; 上 右 下 左 */
}
</style>
13.float 脱离文档流浮动
left 元素向左浮动。
right 元素向右浮动
清除浮动
clear: both;
left
right
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
/* float: left; */
}
.div1,.div2{
float: left;
}
.div3{
float: right;
}
.div4{
width: 400px;
height: 400px;
border: 1px solid blue;
clear: both;
}
</style>
</head>
<body>
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
<div class="div3">
div3
</div>
<div class="div4">
div4
</div>
</body>
14.14.块级元素、行内块级元素：
他会独占一行，在默认情况下，其宽度自动填满其父元素的宽度；
块级元素可以设置width、height属性；
块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性；
行内元素：
行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；
行内元素的width、height属性则无效；
行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。
行内元素转换
display:none; 不显示
display:block;变成块级元素
display:inline; 变成行内元素
display:inline-block;以块级元素样式展示，以行级元素样式排列
块级元素(block element）
address 地址
center 举中对齐块
div- 常用块级容易
dl 定义列表
form 交互表单 （只能用来容纳其它块元素）
h标签
hr 水平分隔线
ol 无需列表
ul有序列表
p 段落
pre 格式化文本
<style>
.demo15,h1,form{
border: 1px solid red;
width: 400px;
height: 100px;
}
</style>
</head>
<body>
<div class="demo15">
demo15
</div>
<h1>h1</h1>
<form action="">表单</form>
<a href="www.sogou.com">sogou</a><label >标签</label><input type="text" value="输入内容"/>
行内元素：
a - 锚点
b - 粗体(不推荐)
br- 换行
code - 计算机代码(在引用源码的时候需要)
em - 强调
i - 斜体
img - 图片（特殊的内联元素，同时是内联替换元素，替换元素可以设置宽高）
当图片和DIV在一起时，图片周围会出现margin现象，即元素不重合贴在一起，为了解决这个问题，设置img的css为{margin：0；display：block；border：0px}
input - 输入框
label - 表格标签
select - 项目选择
strong - 粗体强调
textarea - 多行文本输入框
u - 下划线
var - 定义变量
替换元素有如下：（和img一样的设置方法）
、、、
都是替换元素，这些元素都没有实际的内容元素
<style>
.demo16,.demo17{
border: 1px solid red;
width: 400px;
height: 100px;
display: block;/* 块级元素转换为行内元素 inline（行内元素）none（隐藏）block（转化为块级元素）*/
}
.s1,.s2{
border: 1px solid red;
display: inline-block;/*以块级元素样式展示，以行级元素样式排列 */
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="demo16">
demo16
</div>
<div class="demo17">
demo17
</div>
<span class="s1">sssss</span><span class="s2">sssssss</span>
15.溢出
overflow 属性规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
<style>
.demo17{
width: 200px;
height: 200px;
border: 1px solid red;
overflow:scroll;
}
</style>
</head>
<body>
<div class="demo17">sssssssssssssssssssssssssssssssss</div>
</body>
16.定位
position
static静态定位（不对它的位置进行改变，在哪里就在那里）
默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者z-index 声明）。
fixed固定定位（参照物–浏览器窗口）—做 弹窗广告用到
生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, "right"以及 "bottom"属性进行规定。
relative（相对定位 ）（参照物以他本身）
生成相对定位的元素，相对于其正常位置进行定位。
absolute（绝对定位）(除了static都可以，找到参照物–>与它最近的已经有定位的父元素进行定位)
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
<style>
div{
width: 300px;
height: 300px;
}
.div1{
background-color: aqua;
}
.div2{
width: 500px;
height: 500px;
background-color: blue;
position: relative;/* 相对定位 */
left: 40px;
top: 50px;
}
.div3{
background-color: rebeccapurple;
}
.div4{
width: 150px;
height: 150px;
background: yellow;
position: absolute;
top: 30px;
left: 80px;
z-index: 2;/* 堆叠数字大在前 */
}
.div5{
width: 150px;
height: 150px;
background: green;
position: absolute;
top: 100px;
left: 150px;
z-index: 1;/* 堆叠数字小在后 */
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"><div class="div4"></div><div class="div5"></div></div>
<div class="div3"></div>
</body>
扫一扫
4697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
