css盒子模型+导航条案例
CSS Cascading Style Sheet层叠样式表、一个HTML网页。样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
结构 样式 行为
CSS引入方式：
1、行内样式 <标签 style=”样式规则rules”></标签
2、内嵌样式
<style type=”text/css” >
选择器{样式规则}
</style>
3、引入样式
<style type=”text/css”>
@import url(样式文件名)
</style>
4、外部样式
<link rel=”styelsheet” type=”text/css” href=”url”/>
选择器分类
- 标签选择器
- 类选择器
- id选择器
- 层级选择器
- 分组选择器
- 组合选择器
- 通用选择器
- 伪类选择器
- a链接的四个状态
- a:link{} a链接正常状态
- a:visited{} a链接访问后的状态
- a:hover{} a链接鼠标县停其上的状态
- a:active{} 鼠标a链接按下的状态
组合选择器：
例1：
div .box{} 表示选择div标签下的类为box的所有的元素
div.box{} 表示选择class属性为 box的div.
示例：
<style type="text/css">
.box{border:2px solid red;}
.box1{background:yellow;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="box box1">
<span class="box">span1</span>
<span>span2</span>
</div>
尺寸属性：
width: px 百分比
height: px 百分比
字体属性：
color:
font-size:
font-family:
font-style:
font-weight:
font-transform:
letter-spacing: 设置字间隔
word-spacing: 设置词间隔
line-height: 设置行高
font: 复合属性
font-size与font-family是必须的 font-weight与font-style必须位于前面
文本属性：
text-decoration: underline、over-line、line-through
text-align: 主用用于文字或被包含的行内元素的水平对齐方式
vertical-align: 主用于tr或td
text-indent:
边框属性：
border-width:
border-style:
border-color:
注意：border-width与border-style是属性 border-color默认是黑色
border：复合属性
border-left-width:
border-left-style:
border-left-color:
border-left: 复合属性
背景属性：
background-color:
background-image:
url(图片url)
background-position:
具体值 20px
位置名: left、center、top、right、center、bottom
background-repeat: no-repeat、repeat-x、repeat-y
bakcground-attachment: fixed scroll
background: 复合属性
background:red url(images/bgpic.jpg) 10px 20px no-repeat scroll
CSS的优先级与继承：
!important > 行内样式 > id选择器 > 类选择器 > 标签选择器
行内样式 > 内部样式 > 外部样式
important重要的意思(IE低版本不兼容)
由于父元素样式会被子元素继承，多个父元素的样式会同时施加在子元素上。为了让设计人员能够清楚的知道哪个选择器的样式最优先，人为的为类型设置了相应的等级：
标签选择器 1
类选择器 10
id选择器 100
行内样式 1000
继承：
会被继承的样式主要是与文本相关的样式
color、font-size、font-family、font-weigth、font-style、letter-spacing、word-spacing、line-height、text-indent、text-transform、text-align、text-deocration
边距属性
外边距：
margin: 复合属性 设置元素的外边距
margin-left: 设置元素与其父元素的左边距
margin-top: 设置元素与其父元素的上边距
margin-right: 设置元素与其父元素的右边距
margin-bottom: 设置元素与其父元素的下边距
有四种写法
1、margin:10px;
2、margin:10px 20px;
3、10px代表上下外边距 20代表左右边边距
4、margin:10px 20px 30px;
5、10px代表上边距 20px代表左右外边距 30px代表下外边距
6、margin:10px 20px 30px 40px;
10px代表上外边距 20px代表右外边距 30px代表下外边距 40px左外边距
设置一个块元素水平居中
margin:0 auto;
内边距
padding-left: 设置内左填充距离
padding-top: 设置内上填充距离
padding-right: 设置内右填充距离
padding-bottom: 设置内下填充距离
padding: 复合属性
四种写法：
1、padding:10px;
2、padding:10px 20px;
3、padding:10px 20px 30px;
4、padding:10px 20px 30px 40px;
盒子模型
任何一个html元素都可看成一个”盒子”。现实中盒是用来装物品，这个物品称之为内容(content)，为了保护物品会在盒子与物品之间放置一些填充物，这个填充物称之内填充(padding)，盒子本身有一个厚度，这厚度称之为border，在放置盒子时为了通风会将盒子与盒子之间保留一定距离(margin)；
在html 中存在两种盒子模式：一种是标准盒子模型，另一种是IE盒模型
标签盒子模型
一个元素在网页所占的宽度由：width+padding(左右)+border(左右)+margin(左右)
div{width:100px;border:2px solid red;padding:10px 20px 30xp 40px;margin:30px;}
100px+2*2px+20px+40px+30px*2=224
IE盒子模型
一个元素在网页上所占的宽度由：width+margin(左右)
div{width:100px;border:2px solid red;padding:10px 20px 30xp 40px;margin:30px;}
100px+30px*2 =160
什么时候使用的是标准盒模型，什么时候使用的是IE标签模型，当一个网页文档使用了DTD声名时，则使用W3C标签盒子模型，当没有此声名时，各浏览器使用的是各自的盒子模型。
课堂案例：盒子案例
布局
float设置物体浮动
float:left; 设置元素向左浮动
float:right; 设置元素向右浮动
浮动的特点：
1、元素设置浮动后，浮起来，并向左或向右移动，直到遇到包含它的父元素才停止移动，
2、其他的元素，会过来真实他的位置
3、在元素浮起，移动过程中会出现”卡住”的现象
4、元素浮动后其他的示浮动的元素会过来填充其位置，但非浮动元素的文字性内容不会被覆盖。
5、行内元素浮动后即变为块元素
clear:清除其他元素浮动后对当前元素的影响
clear:left; 清除左则浮动的影响
clear:right; 清除右则浮动的影响
clear:both; 清除右面浮动的影响
为使包含元素在”视觉”上达到包含被浮动元素的效果
1、添加一个清除层为其设置clear:属性
2、在包含元素上使用overflow:hidden;
文档流
浏览器在解析html 文档的时候是将html元素一个接一个的按文档的顺序，在页面上由左到右由上至下显示。这种默认的按文档顺序在页面中显示元素，就叫文档流。
列表样式：ul和ol
list-style-image: 自定义列表项目符号
list-style-type: 设置列表项目符号的类型
none、upper-alpha、lower-alpha、upper-roman、lower-roman、upper-latin、lower-latin
list-style-postion: 设置项目符号的位置
取值：inside项目符号位于li区域内 outside项目符号位于li区域外
list-style: 复合属性
<div>与<span>的区别：
div+css是目前最流行的布局方式。DIV是一个块元素，主要用于在页面定义一个区域，其内容可以包含文本、图片、以及div等任何元素。
span是一个行内元素，DIV可以定义一个区域，span也可以定义一个区段，一般可以使用div包含span，但一般不会使用span包含div，span主要是用来设置样式。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
8
0- 0
已为社区贡献4条内容
所有评论(0)