一、盒子模型

二、外边距 margin

三、内填充 padding

四、浮动 float

五、清除浮动 clear

一、盒子模型

margin：用于控制元素与元素之间的距离；最基本的用途就是控制元素周围空间的间隔，从视觉上达到相互隔开的目的
padding：用于控制内容与边距之间的距离
Border：边框，围绕在内边距和内容外的边框
Content：盒子的内容，显示文本和图像

二、外边距 margin

属性	描述
margin-top	上方外边距
margin-right	右方外边距
margin-bottom	下方外边距
margin-left	左方外边距

简写：

常见居中：






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>margin 外边距</title>





    <style>





        #tag1 {





            /**/





            background-color: black;





            color: white;





            /**/





            margin-top: 20px; /*上*/





            margin-right: 49%; /*右*/





            margin-bottom: 100px; /*下*/





            margin-left: 48%; /*左*/





        }





        #tag2 {





            margin: 0 40% 0 40%; /*简写，顺序：上右下左（逆时针）*/





        }





        p {





            margin: 0 auto; /*居中*/





        }





    </style>





</head>





<body>





<div>





    <p id="tag1">取腰间明珠弹山雀</p>





    <p id="tag2">立枇杷于庭前</p>





    <p>入巷间吃汤面</p>





</div>





</body>





</html>

三、内填充 padding

属性	描述
padding-top	上方内填充
padding-right	右方内填充
padding-bottom	下方内填充
padding-left	左方内填充

简写：






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>padding 内填充</title>





    <style>





        * {





            color: white;





        }





        #tag1 {





            background-color: dodgerblue;





            padding-top: 5px; /*上方*/





            padding-right:41%; /*右方*/





            padding-bottom: 1px; /*下方*/





            padding-left: 44%; /*左方*/





        }





        #tag2 {





            background-color: cornflowerblue;





            padding: 1px 41% 5px 44%; /*简写，顺序：上右下左（逆时针）*/





        }





        #tag3 {





            background-color: gray;





            padding: 1px 40%; /*简写，值1用于上下，值2用于左右*/





        }





        #tag4 {





            background-color: blueviolet;





            padding: 1px 42% 5px; /*简写，值1用于上，值2用于左右，值3用于下*/





        }





        p {





            background-color: darkslateblue;





            font-size: 200%;





            padding: 35%; /*简写，一个值用于四边*/





        }





    </style>





</head>





<body>





<div>





    <span id="tag1">入巷间吃汤面</span>





    <span id="tag2">笑看窗边飞雪</span>





    <span id="tag3">取腰间明珠弹山雀</span>





    <span id="tag4">立枇杷于庭前</span>





    <p>劫过九重城关</p>





</div>





</body>





</html>

四、浮动 float

在CSS中，任何元素都可以浮动.

浮动元素会生成一个块级框，而不论它本身是何种元素.

浮动的两大特性：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止.
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不纯在一样.

值：	left	right	none
描述：	向左浮动	向右浮动	不浮动，默认值






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>float 浮动</title>





    <style>





        * {





            margin: 0;





            color: aqua;





            height: 200px;





        }





        p {





            background-color: gray;





            width: 30%;





            float: left; /*向左浮动*/





        }





        #tag {





            background-color: darkgray;





            width: 30%;





            float: right; /*向右浮动*/





        }





    </style>





</head>





<body>





<div>





    <p>我座下马正酣</p>





    <p id="tag">看那轻飘飘的衣摆</p>





</div>





</body>





</html>

关于浮动的详细说明：W3school

五、清除浮动 clear

clear属性规定元素的那一侧不允许其它浮动元素.

clear属性只会对自身起作用，而不会影响其它元素.

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许有浮动元素
both	在左右两侧均不允许浮动元素
none	允许浮动元素出现在两侧，默认值
inherit	规定应该从父元素继承clear属性的值

父标签塌陷问题：






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>clear 清除浮动</title>





    <style>





        .sign1 {





            width: 100px;





            height: 100px;





            background-color: hotpink;





            float: left; /*左浮动*/





        }





        .sign2 {





            width: 100px;





            height: 100px;





            background-color: aqua;





            float: left; /*左浮动*/





        }





        /*父标签塌陷问题 .1*/





        .father:after {





            content: "";





            display: block;





            clear: both; /*不允许左右两端有浮动快*/





        }





        .sign3 {





            width: 100px;





            height: 100px;





            background-color: blue;





            color: white;





            /*clear: both; 实测，此写法与1处写法在网页显示上并无差异*/





        }





    </style>





</head>





<body>





<div class="father">





    <div class="sign1">趁擦肩把裙掀</div>





    <div class="sign2">踏遍三江六岸</div>





</div>





<div class="sign3">借刀光做船帆</div>





</body>





</html>

六、溢出 overflow

属性
属性	描述
overflow	水平和垂直均设置
overflow-x	设置水平方向
overflow-y	设置垂直方向

值
值	描述
visible	超出的内容不会被修剪，会呈现在元素框之外，默认值
hidden	超出的内容会被修剪，并且超出的内容不可见
scroll	超出的内容会被修剪，但是浏览器会显示滚动条以便查看超出的内容
auto	如果内容超出元素框，则会显示滚动条
inherit	规定应该从父元素继承overflow属性的值






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>overflow 溢出属性</title>





    <style>





        .sign1 {





            width: 180px;





            height: 180px;





            border: 2px solid darkgray; /*边框简写法*/





            float: right;





            overflow: auto; /*内容超出元素框时会显示滚动条*/





        }





        /*圆形头像示例*/





        .sign2 {





            width: 150px;





            height: 150px;





            border: 1px solid darkslategrey;





            border-radius: 50%;





            overflow: hidden;





        }





    </style>





</head>





<body>





<div>





    <div class="sign1">





        任露水浸透了短衫, 大盗睥睨四野, 枕风宿雪多年, 我与虎谋早餐, 拎着钓叟的鱼弦,





        问卧龙几两钱, 蜀中大雨连绵, 关外横尸遍野, 你的笑像一条恶犬, 撞乱了我心弦,





        谈花饮月赋闲, 这春宵艳阳天, 待到梦醒时分睁眼, 铁甲寒意凛冽,





    </div>





    <div class="sign2">





        <img src="https://avatar.csdn.net/5/C/8/1_qq_41964425.jpg?1535957160"





             alt="https://avatar.csdn.net/5/C/8/1_qq_41964425.jpg?1535957160">





    </div>





</div>





</body>





</html>

七、定位 position

1. 无定位 static

默认值，不能作为绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的.

2. 相对定位 relative

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是：即使设定了元素的相对定位以及偏移量，元素仍会占有着原来的位置，即占据文档流空间。对象遵循正常的文档流，但将依据top、right、bottom、left等属性在正常文档流中偏移位置，而且层叠通过z-index属性定义.

注意：相对定位的主要用法是为方便绝对定位元素找到参照物.






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>relative 相对定位</title>





    <style>





        div>div {





            width: 150px;





            text-align: center;





            margin: 5px 5px 5px 5px;





            position: relative; /*相对定位*/





        }





        .sign1 {





            background-color: #74d3d2;





            left: 200px; /*向右移*/





            top: 100px; /*再向下移*/





        }





        .sign2 {





            background-color: #808b74;





            left: 220px;





            top: 90px;





        }





    </style>





</head>





<body>





<div>





    <div class="sign1">夙愿只隔一箭</div>





    <div class="sign2">故乡近似天边</div>





</div>





</body>





</html>

3. 绝对定位 absolute

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置将相对于最初的包含快（即body元素）。元素定位后生成一个块级框，而不论原来他在正常流中生成何种类型的框.

重点：如果父级设置了position属性，例如position: relative;，那么子元素就会以父级的左上角为原始点进行定位。这样就能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那么子元素就设置为绝对定位；父元素设置相对定位，然后通过top、right、bottom、left用百分比宽度表示.

另外，对象脱离正常文档流，使用top、right、bottom、left、等属性进行绝对定位，而起层叠通过z-index属性定义.






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>absolute 绝对定位</title>





    <style>





        * {





            margin: 0;





        }





        div>div {





            width: 150px;





            text-align: center;





            position: absolute; /*绝对定位*/





        }





        .sign1 {





            background-color: #b5c8d3;





            bottom: 50px;





            left: 50px;





        }





        .sign2 {





            background-color: #b5c8d3;





            bottom: 50px;





            right: 50px;





        }





    </style>





</head>





<body>





<div>





    <div class="sign1">不知何人浅唱弄弦</div>





    <div class="sign2">我彷徨不可前</div>





</div>





</body>





</html>

4. 固定 fixed

设置为固定的对象脱离正常文档流，使用top、right、bottom、left、等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动，而起层叠通过z-index属性定义.

注意：如果一个元素设置了position: absolute | fixed;，则这个元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流：一个是浮动流；另一个是“定位流”。但是呢，relative却可以，因为它原本所占的空间仍然会占据文档流.

理论上被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，他都会固定在这个位置.






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>fixed 固定</title>





    <style>





        .sign {





            height: 1000px;





            background-color: yellow;





        }





        .sign>div {





            width: 120px;





            background-color: #a495ed;





            color: white;





            text-align: center;





        }





        .sign1 {





            position: fixed; /*固定*/





            left: 75%;





            top: 95%;





        }





        .sign1>a {





            text-decoration: none; /*去掉超链接自带的下划线*/





        }





    </style>





</head>





<body>





<div class="sign">





    <div>





        <a name="tag">枕风宿雪多年</a>





    </div>





    <div class="sign1">





        <a href="#tag">我与虎谋早餐</a>





    </div>





</div>





</body>





</html>

八、层叠顺序 z-index

定义对象的层叠顺序，仅能在定位元素上奏效，数字大的会覆盖在数值小的标签之上.






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>z-index 层叠顺序</title>





    <style>





        div>div {





            width: 150px;





            color: white;





            text-align: center;





            position: fixed;





        }





        .sign1 {





            background-color: rgba(0, 0, 0, 0.33);





            z-index: 10000;





        }





        .sign2 {





            background-color: rgb(188, 211, 188);





            left: 120px;





            z-index: 9999;





        }





    </style>





</head>





<body>





<div>





    <div class="sign1">拎着钓叟的鱼弦</div>





    <div class="sign2">问卧龙几两钱</div>





</div>





</body>





</html>

九、透明度 opacit

定义元素的透明度，取值范围：0～1，0是完全透明，1是完全不透明.

注意：opacit是将对象的一切都透明，而background-color: rgba(0, 0, 0, 0.33);只是将对象的背景变透明.






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>opacticy 透明度</title>





    <style>





        div>div {





            color: black;





            width: 150px;





            background-color: gray;





            margin: 10px;





            text-align: center;





        }





        .sign1,





        .sign2 {





            opacity: 0.33; /*全透明*/





        }





        .sign3,





        .sign4 {





            background-color: rgba(124, 126, 139, 0.33); /*仅背景透明*/





        }





    </style>





</head>





<body>





<div>





    <div class="sign1">蜀中大雨连绵</div>





    <div class="sign2">关外横尸遍野</div>





    <div class="sign3">你的笑像一条恶犬</div>





    <div class="sign4">撞乱我心弦</div>





</div>





</body>





</html>

【CSS属性#2】的更多相关文章

通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
换行的css属性
//正常换行 word-break:keep-all;word-wrap:normal; //下面这行是自动换行 word-break:break-all;word-wrap:break-word ...
jquery css属性练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
animate支持的css属性
支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...
css属性的选择对动画性能的影响
现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...
CSS中浏览器开发商特定的CSS属性
浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...
css学习（2）-- 常见的CSS属性和值
1.CSS中修饰字体的属性属性描述属性值 font-family 字体族科任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...
css属性编写顺序+mysql基本操作+html细节（个人笔记）
css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...
前端开发--css属性书写顺序
css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...
那些年我们错过的超级好用的CSS属性
在看前辈写的CSS样式的时候发现好多之前都没用过的Css属性,现在看来有必要整理一下啦. 一.CSS选择器(http://www.w3school.com.cn/cssref/css_selector ...

随机推荐

COMMUNITY DETECTION_python-louvain
Python-louvain Package pip install python-louvain import community #first compute the best partition ...
SigXplorer设置延时及Local_Global
通过SigXplorer设置绝对延时和相对延时及对Local-Global的理解一.基本理解 (感觉可能有偏差) 在于博士的教程第44和45讲中,分别对绝对延时和相对延时进行了设置,通过SigXpl ...
HTML5使用JavaScript控制＜audio>音频的播放
1.播放音乐最简单的样例 <audio controls> <source src="horse.mp3" type="audio/mpeg" ...
codeforces 1285E. Delete a Segment
链接:https://codeforces.com/problemset/problem/1285/E 题意:给一个数轴上有n个线段集,线段集若有相交,则合并为一个新的合并线段集,比如[1,6]和[2 ...
Java第一个程序HelloWorld
1.创建一个java源文件:HelloWorld.java public class HelloWorld{ public static void main(String[] args){ Syste ...
spring bean 的作用域
spring bean 的作用域: 1.单例(singleton):默认是单例模式,也就是说不管给定的bean被注入到其他bean多少次,注入的都是同一个实例. 2.原型(prototype):每次注 ...
CompletableFuture--给future调用增加回调或聚合操作
CompletableFuture--增大内存节省时间.整合多个future调用,来减少时间例如:第一个future 返回时1s,第二个返回时2s,第三个返回是3s CompletableFut ...
LED Magic Light - How Does The LED Light Change Color?
The LED Magic Light states that the color-changing LED is not an LED in the package, but three ...
JSON对比XML
相同点纯文本具有“自我描述性”(人类可读) 具有层级结构可通过JavaScript解析数据可使用AJAX传输不同点没有结束标签更短读写速度更快能够使用内建的JavaScript ev ...
关于static 关键字的总结
转发自:https://www.cnblogs.com/xrq730/p/4820992.html 前言之前讲到final关键字的作用是每次面试的时候我必问求职者的两个问题之一,另外一个问题就是文本 ...

【CSS属性#2】

一、盒子模型

二、外边距 margin

三、内填充 padding

四、浮动 float

五、清除浮动 clear

六、溢出 overflow

七、定位 position

1. 无定位 static

2. 相对定位 relative

3. 绝对定位 absolute

4. 固定 fixed

八、 层叠顺序 z-index

九、透明度 opacit

【CSS属性#2】的更多相关文章

随机推荐

热门专题

八、层叠顺序 z-index