【CSS属性#2】
"
目录
一、盒子模型
- 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 ...
随机推荐
- python3练习100题——012
今天继续,答案都通过py3测试. 原题链接:http://www.runoob.com/python/python-exercise-example12.html 题目:判断101-200之间有多少个 ...
- 同一域名的ASP.NET网站实现Session共享
Session共享主要保证两点: 前台Asp_SessionId的Cookie作用域为顶级域名,且值相同 后端Session公用同一源 通过自定义HttpModule可以实现这两个需求 /// < ...
- jvm(3):JVM调优
typora-root-url: ./ JVM调优思路 目的:减少full GC次数.减少STW时间(一次GC的时间) 手段: 打印GC日志-XX:+PrintGCDetails -XX:+Print ...
- DisplayNameFor()方法的工作原理
DisplayNameFor()方法的工作原理原创Peter Yelnav 最后发布于2018-11-23 11:09:51 阅读数 1308 收藏展开最近研究了一下ASP.NET MVC,困惑于视图 ...
- sudo用户找不到环境变量 sudo找不到/usr/local/bin 下的执行文件,
出于安全方面的考虑,使用sudo执行命令将在一个最小化的环境中执行,环境变量都重置成默认状态. 所以PATH这个变量不包括用户自定义设置的内容,如找不到/usr/local/bin/下面的命令在sud ...
- php一些实用的自制方法
时间戳转多久之前 function mdate($time = NULL) { $text = ''; $time = $time === NULL || $time > time() ? ti ...
- php商城数据库的设计 之无限分类
商品分类,使用无限分类 即: -------如何创建数据表 pid---父级分类id,如果是顶级分类则为0 path---1,用户分类的排序 . 排序示例: 实现逻辑:获取type表的所有分类,ord ...
- python正则元字符的含义
练习的时候使用linux+ipython,ipython安装 python的元字符 # 元字符 :# . ^ $ * + ? {} [] \ | () 注:\w ...
- Abp.core中在应用层获取HttpContext对象
实际IHttpContextAccessor对象已经在底层实现了自动的依赖注入,只需要在应用层引入Microsoft.AspNetCore.Http,然后在构造函数中依赖注入即可. /// <s ...
- Bugku-CTF之你从哪里来
Day 27 你从哪里来 http://123.206.87.240:9009/from.php 本题要点: http referer头的修改 查看源码什么也没有 抓个包看一下