CSS样式中选择器+盒子模型+定位+浮动

一、选择器

选择器，选择你所需要修饰的HTML元素

1.通配符选择器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 通配符选择器：选择html文档中所有的标签*/*{color: red;}</style></head><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>用真心待她人</p><p>做美丽的自己</p></body>
</html>

2.标签选择器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 标签选择器*/p{color: red;}/** class选择器* 注意：以.开头*/.myclass{color: green;}/** id选择器* 注意：*      1.以#开头*         2.潜规则：id是唯一的*/#myid{color: blue;}</style></head><body><h1 class="myclass">一级标签</h1><h2>二级标签</h2><h3 class="myclass">三级标签</h3><h4>四级标签</h4><h5 class="myclass">五级标签</h5><h6 id="myid">六级标签</h6><p>用真心待她人</p><p>做美丽的自己</p></body>
</html>

3.基本选择器的优先级别

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 基本选择器的优先级别：ID选择器>CLASS选择器>标签选择器*/p{color: red;}.myclass{color: green;}#myid{color: blue;}</style></head><body><p id="myid" class="myclass">用良心做教育</p></body>
</html>

4.群组选择器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 群组选择器*/h1,h3,h5,p{color: red;}</style></head><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>用真心待她人</p><p>做美丽的自己</p></body>
</html>

5.派生选择器/上下文关系选择器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/** 派生选择器/上下文关系选择器* *     后台选择器*      ul a{color: red;}子代选择器li>a{color: red;}相邻兄弟选择器注意：效果作用于后者a+a{color: red;}*/</style></head><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li><li><a href="#">超链接7</a></li></ul><a href="#">超链接8</a><a href="#">超链接9</a><a href="#">超链接10</a><a href="#">超链接11</a><a href="#">超链接12</a></body>
</html>

6.属性选择器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/**   属性选择器 --- 单个属性*         input[placeholder]{color: red;}属性选择器 --- 单个属性+值    input[type=password]{color: red;}属性选择器 --- 多个属性input[type][placeholder]{color: red;}属性选择器 --- 多个属性+值input[type=password][name=repassword]{color: red;}*/</style></head><body><form action="服务器地址" method="post">账号：<input name="username" type="text" placeholder="请输入账号"/><br />密码：<input name="password" type="password" placeholder="请输入密码"/><br />确认密码：<input name="repassword" type="password" placeholder="请输入确认密码"/><br />性别：<input type="radio" name="sex" value="man" checked="checked"/>男<input type="radio" name="sex" value="woman"/>女<br />爱好：<input type="checkbox" name="hobbys" value="football"/>足球<input type="checkbox" name="hobbys" value="basketball"/>篮球<input type="checkbox" name="hobbys" value="shop"/>购物<br />籍贯：<select name="province"><option value="sc">四川</option><option value="hn" selected="selected">湖南</option><option value="hb">湖北</option></select>省<select name="city"><option value="cs">长沙</option><option value="yy">岳阳</option><option value="xy" selected="selected">襄阳</option><option value="ld">娄底</option><option value="yz">永州</option></select>市<br /><input type="submit" value="注册" /></form></body>
</html>

7.样式的优先级别

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--样式的优先级别：行内样式 > 内部样式和外部样式注意：内部样式和外部样式看加载顺序--><!--内部样式--><style type="text/css">p{color: red;}</style><!--外部样式--><link rel="stylesheet" href="../css/new_file.css" /></head><body><!--行内样式--><p style="color: blue;">用良心做教育</p></body>
</html>

8.锚伪类

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">a:link {color: #66CCFF}   /* 未访问的链接 */a:visited {color: #CC0000}  /* 已访问的链接 */a:hover {color: #33FFFF}    /* 鼠标移动到链接上 */a:active {color: #9900FF} /* 选定的链接 */</style></head><body><a href="http://www.sina.com.cn">新浪微博</a></body>
</html>

9.常用属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{font-family: "微软雅黑";/*字体*/font-size: 30px;/*大小*//**    ---- normal标准样式---- italic斜体---- oblique倾斜---- inherit从父类继承的字体样式*/     font-style: oblique;/*风格*//*----normal标准样式----bold粗体----bolder更粗----lighter更细*/       font-weight: bolder;/*字体加粗*/ letter-spacing: 20px;/*字符间隔*/text-decoration: underline;/*添加划线*/text-align: center;/*字体居中*/background-color: red;/*背景*/ color: white;/** 边框属性名称border-bottomsolid(实线)dashed(虚线)double(双实线)*/                 border:orange 10px solid;/*边框：颜色、粗细、实线*/}</style></head><body><p>用良心做教育</p></body>
</html>

二、盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式

浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
为了兼容IE老版本，一句话，能用外边距就用外边距

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 200px;height: 200px;border: red 1px solid;/*padding: 50px;设置上下左右内边距*//*padding-top: 20px;设置顶部内边距*//*padding-bottom: 20px;设置底部内边距*//*padding-left: 20px;设置左边内边距*//*padding-right: 20px;设置右边内边距*//*margin: 50px;设置上下左右外边距*/margin-top: 20px;/*设置顶部外边距*/margin-bottom: 20px;/*设置底部外边距*/margin-left: 20px;/*设置左边外边距*/margin-right: 20px;/*设置右边外边距*//*margin: 0 auto;水平居中*/}</style></head><body><div><span>元素</span></div></body>
</html>

三、定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

CSS 定位机制
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

1.相对定位

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 50px;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;position: relative;/*相对定位：保留原来的位置，相对于原来的位置进行位移*/left: 30px;top: 30px;}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>

2.绝对定位

绝对定位相对于他有position属性的父级元素进行定位，如果父级元素没有postion定位，那么就找父级的父级，直到向上找到position定位为止，如果他向上找不到position定位，那么就以最外层的body进行定位。

并且绝对定位不会保留原有的位置空间。

z-index属性，确定层级大小，用来设定哪一个盒子在上面，越大越在上面

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 50px;position: relative;}#box01{width: 100px;height: 100px;border: red 1px solid;}#box02{width: 100px;height: 100px;border: green 1px solid;position: absolute;/*绝对定位：不保留原来的位置，向上去找寻父级标签，查看父级标签是否有position属性，如果有就按照父级标签位置进行位移，如果没有就继续向上找寻，直到body位置*/left: 30px;top: 30px;}#box03{width: 100px;height: 100px;border: blue 1px solid;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>

3.固定定位

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#top{position: fixed;/*固定定位*/top:70%;left: 90%;}</style></head><body><a id="top" href="#new01">☝</a><a href="#new01">法制</a><a href="#new02">国际</a><a href="#new03">教育</a><a href="#new04">娱乐</a><a name="new01"></a><!--锚点--><h1>法制新闻</h1><h1>法制新闻</h1><h1>法制新闻</h1><h1>法制新闻</h1><h1>法制新闻</h1><h1>法制新闻</h1><h1>法制新闻</h1><h1>法制新闻</h1><a name="new02"></a><!--锚点--><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><a name="new03"></a><!--锚点--><h1>教育新闻</h1><h1>教育新闻</h1><h1>教育新闻</h1><h1>教育新闻</h1><h1>教育新闻</h1><h1>教育新闻</h1><h1>教育新闻</h1><h1>教育新闻</h1><h1>教育新闻</h1><h1>教育新闻</h1><h1>教育新闻</h1><h1>教育新闻</h1><h1>教育新闻</h1><a name="new04"></a><!--锚点--><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1></body>
</html>

四、浮动

浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。

副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。

解决办法：添加空盒子

在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div

.clear{clear:both;}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;width: 80%;margin: 0 auto;padding: 5px;}#box01{border: orange 1px solid;width: 100%;height: 150px;}#box02{border: orange 1px solid;width: 25%;height: 200px;float: left;}#box03{border: orange 1px solid;width: 45%;height: 200px;float: left;}#box04{border: orange 1px solid;width: 25%;height: 200px;float: left;}.myclear{clear: both;}</style></head><body><div id="manager"><div id="box01"></div><div><div id="box02"></div><div id="box03"></div><div id="box04"></div><div class="myclear"></div></div></div></body>
</html>

五、扩展

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;}input{width: 100px;height: 50px;color: white;font-weight: bolder;background-color: orange;border-radius: 15px;/*圆角属性*/box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/}</style></head><body><input type="button" value="普通按钮" /></body>
</html>

六、新增语义化标签

标签	描述
	头部标签
	导航标签
查看全文 http://www.taodudu.cc/news/show-5600169.html 相关文章：【面经】腾讯和YY实习生面试总结动态获取鼠标在盒子里的位置获取鼠标在盒子里的位置 36.html-弹性盒子基础 29.html-盒子边框、阴影、外边距合并 CSS盒子阴影，文字阴影 28.html-盒子模型-内外边距 js实现盒子的拉伸安卓盒子改文件服务器,云服务器安装安卓盒子 fifa足球世界服务器不稳定,FIFA足球世界卡顿原因卡顿解决方法一览 linux能运行英魂之刃吗,英魂之刃端游怎么流畅运行 linux定时任务重复率,基于SpringBoot实现定时任务的设置（常用：定时清理数据库）... codevs4290 二元一次不定方程~（三星） matlab str2num出错,Matlab调用python，返回vector，str2num不工作返回 storm卡宾枪_《战地4》全武器道具列表一览花生壳映射本地mysql 数据库步骤凝思自动获取ip配置 linux中ip地址变化的原因与解决自动获取IP换成固定IP后断网的解决办法盘点18款月流水千万国产手游的来龙去脉最好的励志书玩转Android10源码开发定制(二)之基于oneplus3手机演示recovery刷机 Recovery刷机图文教程使用Recovery刷机方法 android 第三方recovery刷机刷recovery运行linux,Ubuntu 手机版刷机简明教程（通过 recovery 刷机）【更新刷机体验视频】... mdb文件导入MySQL pyav 音频转换小函数 wav 转 mp3 ogg等解决w ndows7basic,win7出现提示“配色方案已更改为Windows7 Basic”该怎么解决 win7运行java配色方案_Win7系统提示“配色方案已更改为Windows7 Basic”如何解决？...

CSS样式中选择器+盒子模型+定位+浮动相关推荐

超详细的css知识树状图~CSS选择器盒子模型、浮动、定位和装饰
前言学习任何新知识,最重要的永远都是搭建属于自己的知识框架,随后学习的细碎知识点往框架里面填入,最后形成一棵属于自己的知识大树.本系列的博客专注更新总结好的思维导图,希望可以帮助大家快速理清知识结构 ...
CSS选择器+盒子模型+定位( 基础笔记 )
CSS学习笔记 CSS-层叠样式表-网页实际上是一个多层的结构,通过CSS可以分别为网页的每一个层来设置样式,而最终我们能看到只是网页的最上边的一层-总之一句话,CSS用来设置网页中元素的样式使用C ...
CSS 三大特性与盒子模型
CSS 三大特性 CSS层叠性 css=层叠样式表所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个 ...
CSS--背景样式---伪类选择器---高级选择器---盒子模型---浮动
文章目录背景样式背景颜色背景图片图片重复方式图片位置图片附着简写属性伪类选择器高级选择器后代选择器直接后代选择器并列选择器相邻兄弟选择器盒子模型边框内边距外边距外边 ...
CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流.盒子模型.浮动.定位,了解了核心内容才能用CSS设计出一个简单的页面一.基础在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素: 块级元素:一个块级元素占 ...
【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点思维导图 ...
CSS盒子模型AND浮动[附：常用工具ps]
课程目标: 熟练掌握CSS盒子模型熟练掌握CSS浮动盒子模型(CSS重点) 其实,CSS就三个大模块: 盒子模型 . 浮动 . 定位,其余的都是细节.要求这三部分,无论如何也要学的非常精通. 所谓 ...
1.01.21盒子模型，浮动，定位
1.01.21盒子模型,浮动,定位 1.盒子模型 1. 标准文档流网页在排版布局时,遵循的从上到下,从左到右的顺序正常的元素是会占据页面的空间大小的脱离文档流:不再遵循从上往下,从左往右的顺序( ...
day 9/16 css三大特性和盒子模型
CSS 三大特性层叠性继承性特殊性 CSS层叠性所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另 ...

CSS样式中选择器+盒子模型+定位+浮动

CSS样式中选择器+盒子模型+定位+浮动

一、选择器

1.通配符选择器

2.标签选择器

3.基本选择器的优先级别

4.群组选择器

5.派生选择器/上下文关系选择器

6.属性选择器

7.样式的优先级别

8.锚伪类

9.常用属性

二、盒子模型

三、定位

1.相对定位

2.绝对定位

3.固定定位

四、浮动

五、扩展

六、新增语义化标签

相关文章：

CSS样式中选择器+盒子模型+定位+浮动相关推荐

最新文章

热门文章