目录
行内块级元素
- 既有行元素的属性即：不会独占一行
- 又有块元素的属性即：可以设置宽高
- HTML中这种元素比较少
- 比如：<img />还有表单元素
文档流
- HTML元素在标准状况下的定位方式，会按照由上到下由左到右的顺序排列
- 行内元素在同一行内横向排列
- 块级元素占满整个一行，在页面中竖向排列
font属性
文本段落
- text-align
设置文本水平对齐方式，left对齐， right：右对齐， center居中对齐，justify两端对齐 - line-height
设置元素的行高- 字体行高 单行文字一般用来设置居中
- 多行文字用来设置行间距，常用单位em
- text-indent
设置首行的缩进方式 text-indent:px单位 常用单位em
文字属性
- font-weight
文本内容的粗细设置，norma按标准显示，bold加粗显示 - font-style
设置文本显示风格，normal按标准显示， italic倾斜显示 - text-decoration
设置文本修饰风格，underline下划线， overline上划线， line-through删除线， none去除文本修饰风格 - font-variant
字体是否为大写，small-caps为大写， norma为标准小写。 - color
设置字体的颜色
eg:
<!DOCTYPE html>
<html>
<head>
<title>font</title>
<style type="text/css">
p{
color: blue;
font-size: 30px;
/*
em：当前字体大小的倍数
px：像素
*/
font-family: 微软雅黑,黑体;
width: 700px;
height: 200px;
border: 3px solid blue;
text-align: center;
line-height: 60px;
text-indent:2em;
font-style: italic; /*倾斜*/
}
</style>
</head>
<body>
<p>属性属性属性属性属性属性属性属性属性属性属性属性属性属性属性属性属性属性属性属性属属性属性属属性属性属属性属性属属性属性属</p>
</body>
</html>
盒子模型
- 盒子模型是CSS的基石之一，布局最重要的概念，它指定元素如何呈现在页面当中。网页就是由许多个盒子通过不同的排列方式（纵向排列，横向排列，嵌套排列）堆积而成
- 页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成
- 默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子
概念和属性
- 内容
盒子里面所包含的元素和内容 - 填充（内边距）（ padding）
- 盒子里面的内容到盒子的边框之间的距离
padding-left、 padding-right、 padding-top、 padding-bottom
- 盒子里面的内容到盒子的边框之间的距离
- 边框（ border）
- 盒子本身有边框（ border）
border-left、 border-right、 border-top、 border- bottom
- 盒子本身有边框（ border）
- 外边距（ margIn）
- 边框外和其它盒子之间
margIn-left、 margin-right、 margin-top、margin-bottom
- 边框外和其它盒子之间
一个参数：四个方向
两个参数：第一个代表上下，第二个代表左右
三个参数：第一个代表上，第二个代表左右，第三个代表下
四个参数：分别代表上右下左
如果不给块级元素设置具体的宽度，那么他的宽度就默认是100%，跟父级宽度保持一致
如果不给元素设置固定的高度，那么元素的高度会根据内容来自动变换
行级标签外边距 margin只有左右方向，没有上下方向
常见问题
- 大部分HTML元素的盒子属性（ margin, padding）默认值都为0，有少数html元素的 margIn, padding浏览器默认值不为0，例如：body,p,ul,li,form标记等，因此有时有必要先设置它们的这些属性为0。css全局 reset
- 相邻两个兄弟元素的左右外边距会累加，上下外边距会发生合并
块元素和行元素的相互转换
- 块元素转为行元素
- display:inline
- 行元素转为块元素
- display:block
eg:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.jd{
font-size: 15px;
color: white;
font-weight: 700;
text-decoration: none;
background: #E43D40;
display: block;
width: 100px;
height: 40px;
float: left;
margin-right: 10px;
text-align: center;
line-height: 40px;
}
.jd:hover{
background: #A40000;
}
a.market{
width: 150px;
background: orange;
}
</style>
</head>
<body>
<a href="" class="jd">首页</a>
<a href="" class="jd">服装城</a>
<a href="" class="jd market">京东超市</a>
<a href="" class="jd">团购</a>
</body>
</html>
display属性
- display
- 为元素设置 display:none; 可以让元素隐藏起来并且不占用页面空间，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置
- 将行内元素如span、 strong设置为 display:block；可以让元素具有块特性
- 将块级元素设置成 display:inline；可以让块级元素变为行内元素
- display:inline-block; 指定元素兼有块级和行级元素的特性，即在行内显示但是可以设定宽高
注意：IE6不支持此属性，但是有一些元素具有此属性比如 img\input
overflow属性
有时候，子元素的宽高会超出父元素的尺寸，我们需要对超出的内容做一些设置
- hidden
将超出的内容隐藏 - visible
全部显示内容 - auto
根据实际情况做出调整，如果说没有超出那么正常显示，否则将会出现滚动条 - scroll
始终出现滚动条
边框、宽度与高度
- border-width
设置四个方面的边框充度，可以通过设置 border-top-width、 border-right-width、 border- bottom-width、 border-left-width对某一面的边框宽度单独设置，值为：具体的数字或是
thin medium thick - border-color
设置四个方面的边框颜色，可以通过设置 border-top-color、 border-right-color、 border- bottom- color、 border-left- color对某一面的边框颜色单独设置 - border-style
设置四个方面的边框样式，可以通过设置 border-top-style、 border-right- style、 border- bottom- style、 border-left-stye对某一面的边框样式进行单独设置
eg:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#box{
width: 400px;
height: 400px;
margin: 0 auto;
margin-top: 30px;
border-width: 5px;
border-style: solid;
border-color: blue;
border-right-width: 15px;
border-top-style: dotted;
}
</style>
</head>
<body>
<div id="box">
当地时间4月26日，微软创始人、亿万富翁比尔·盖茨接受美国有线电视新闻网（CNN）采访。盖茨在回应主持人提到“有声音指责中国掩盖事实应为疫情负责”时，盖茨强调，中国一开始做了很多正确的事情。
</div>
</body>
</html>
浮动float
- 可以改变普通文档流的排列方式，可以使得块元素在同一行中排列，使我们的布局更加的方便
- 通过设置foat属性来完成另一种脱离文档流的行为就是浮动，分为左、右浮动
- 浮动是脱离文档流的，也就是其他元素视他不见
- 浮动什么时候停止：
- 1.当遇到一个浮动元素后会停止
- 2.遇到父级元素后会停止
- 多个盒子都浮动后，就产生了块级元素水平排列的效果
- 多个浮动元素不会相互覆盖
- 若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住
eg:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background: purple;
float: left;
}
#box2{
width: 200px;
height: 200px;
background: green;
float: left;
}
#box3{
width: 200px;
height: 200px;
background: orange;
float: left;
}
</style>
</head>
<body>
<!-- float可以让块级元素排列到一行 -->
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
eg2:京东导航条
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#menu li{
float: left;
list-style: none;
}
#menu li a{
font-size: 15px;
font-weight: 700px;
color: white;
display: block;
height: 40px;
background: #E43C3E;
text-decoration: none;
line-height: 40px;
width: 85px;
text-align:center;
}
#menu li a:hover{
background: #A40000;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="">首页</a></li>
<li><a href="">服装城</a></li>
<li><a href="">京东超市</a></li>
<li><a href="">团购</a></li>
<li><a href="">夺宝岛</a></li>
<li><a href="">在线游戏</a></li>
</ul>
</body>
</html>
练习
<!DOCTYPE html>
<html>
<head>
<title>凡客</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="top_box">
<div id="top">
<div class="left">
<p class="hi">你好，欢迎光临凡客诚品!</p>
<p class="login_reg">[ <a href="">登录</a> | <a href="">免费注册</a> ]</p>
<a href="" class="left_a">为你推荐</a>
<a href="" class="left_a">我的订单</a>
<a href="" class="left_a">收藏本站</a>
</div>
</div>
</div>
</body>
</html>*{
padding: 0px;
margin:0px;
font-size: 12px;
}
a{
color: #333333;
text-decoration: none;
}
#top_box{
width: 100%;
height: 33px;
background: rgb(235,237,239);
}
#top_box #top{
width: 1200px;
height: 33px;
margin: 0 auto;
line-height: 31px;
}
#top_box #top .left{
height: 31px;
float: left;
}
#top_box #top .left .hi{
color: #333333;
float: left;
}
#top_box #top .left .login_reg{
float: left;
color: #A10000;
}
#top_box #top .left .login_reg a{
color: #A10000;
}
#top_box #top .left .left_a{
float: left;
padding-left: 15px;
}
654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
