css布局相关属性
------------------css核心属性
------------------标准布局
------------------浮动
------------------定位
------------------盒子模型
一、css核心属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.css文本属性 -->
<p id="p1">你好，世界!</p>
<p id="p2">我是段落1</p>
<div style="text-align: center;background-color: pink;">
<a href="">百度</a>
<a href="">爱奇艺</a>
<a href="">淘宝</a>
<a href="">京东</a>
</div>
<style>
#p1{
/* 1)字体大小 */
font-size: 25px;
/* 2)文字颜色 */
color: rgba(255, 0, 0, 0.5);
/* 3)字体名称 */
/* font-family: "黑体", 'Courier', 'monospace'; */
/* 4)文字加粗
100~900对应9个等级
*/
font-weight: 200;
/* 5）文字倾斜: italic/oblique/normal*/
font-style: italic;
/* 7）设置行高 */
line-height: 60px;
/* 8)添加文字装饰
none - 取消下划线
underline - 添加下划线
overline - 添加上划线
line-through - 添加删除线
*/
text-decoration: underline;
/* 8)首行缩进
常见单位：
px - 像素
cm - 厘米
em - 空格
*/
text-indent: 2em;
/* 9）字间距 */
letter-spacing: 10px;
}
#p2{
background-color: hotpink;
width: 50%;
/* 6)设置对齐方式 */
text-align: center;
}
</style>
<hr>
<!-- 2. 背景相关属性 -->
<div id="div1">我是一个div</div>
<style>
#div1{
width: 200px;
height: 200px;
/* 1)单独设置背景颜色
background-color: yellowgreen;
/* 2）同时设置背景相关属性
background:背景图地址 是否平铺 x方向位置 y方向位置 背景颜色
*/
background:url(img/hua.png) no-repeat 20px 20px yellowgreen;
}
</style>
<hr>
<!-- 3. 边框属性 -->
<div id="div2"></div>
<style>
#div2{
width: 200px;
height: 200px;
background-color: khaki;
/* 1)同时设置四个边的边框
border: none; - 去掉自带的边框
border: 边框宽度 边框风格 边框颜色;
边框风格 - solid(实线)/dashed(虚线)dotted(点划线)double(双线)
*/
/* border: 5px solid red; */
/* 2)单独设置某一条边的边框
border-left:边框宽度 边框风格 边框颜色;
border-right:边框宽度 边框风格 边框颜色;
border-top:边框宽度 边框风格 边框颜色;
border-bottom:边框宽度 边框风格 边框颜色;
*/
border-bottom: 3px dotted gray;
border-top: 3px dotted gray;
border-left: 10px solid lightblue;
border-right: 3px solid lightblue;
}
</style>
<hr>
<!-- 4.圆角属性 -->
<div id="div3"></div>
<style>
#div3{
width: 500px;
height: 200px;
background-color: skyblue;
/* 1)同时设置四个角的圆角弧度
border-radius: 弧度大小
*/
border-radius: 100px;
/* 2)单独设置四个角的圆角弧度 */
/* border-top-left-radius: 50px;
border-bottom-right-radius: 50px; */
}
</style>
</body>
</html>
二、标准布局
<!-- 1. 标准流
标签在没有添加任何布局相关属性的时候，标准默认的布局方式，就是按照标准流布局。
根据标签在标准流中布局的特点可以将标签分为三类：块级标签、行内标签、行内块标签。
-->
<!-- 2.三种不同类型的标签
1）块级标签：一个占一行；设置宽高有效；默认宽度是父标签的宽度，默认高度是内容高度。
例如：p、div、li等
2) 行内标签：一行可以显示多个；设置宽高无效；默认大小是内容的大小。
例如：a、span、label、b、i等
3)行内块标签：一行可以显示多个；默认大小是内容的大小；设置宽高有效。
例如：img、input(输入框)
-->
<!-- 3.改变标签类型：display属性
none - 隐藏标签
block - 块级标签
inline - 行内标签
inline-block - 行内块
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- ------------1)块级标签案例 ------------------>
<p>我是段落1</p>
<p>我是段落2</p>
<style>
p{
background-color: hotpink;
width: 200px;
height: 60px;
}
</style>
<!-- ------------2）行内标签案例 ----------------->
<div>
<a href="">我是超链接1</a>
<a href="">我是超链接2</a>
</div>
<style>
a{
background-color: skyblue;
width: 400px;
height: 60px;
}
</style>
<!-- ------------3）行内标签案例 ----------------->
<div>
<img id="img1" src="img/hua.png" alt="">
</div>
<div>
<img src="img/hua.png" alt="">
</div>
<style>
#img1{
width: 200px;
}
</style>
<hr>
<!-------------- 4）修改标签的类型 -------------->
<div id="box">
<div style="background-color: hotpink;">我是div1</div>
<div style="background-color: khaki;">我是div2</div>
</div>
<div>我是div3</div>
<style>
#box>div{
display: inline-block;
width: 200px;
height: 60px;
}
</style>
</body>
</html>
三、浮动
<!-- 1.脱离标准流
浮动和定位都可以让标签脱流，标签一旦脱流不管什么标签都会像行内块一样布局(一行可以显示多个，默认大小是内容大小，设置宽高有效)
-->
<!-- 2.浮动： float属性
left - 左浮动
right - 右浮动
-->
<!-- 3.浮动的应用场景：让竖着显示的横着
主要用于整体结构布局中有左右结构的时候
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- --------------1）浮动会脱流 -------------- -->
<!-- <div id="box1">
<p>我是段落1</p>
<p>我是段落2</p>
<a href="">我是超链接1</a>
<a href="">我是超链接2</a>
</div>
<style>
#box1>p{
background-color: pink;
width: 200px;
height: 60px;
/* 左浮动 */
float: left;
}
#box1>a{
background-color: skyblue;
width: 200px;
height: 60px;
/* 右浮动 */
float: right;
}
</style> -->
<!-- --------------2）网页结构1：上下结构
直接使用div在标准中布局
-------------- -->
<!-- <div style="background-color: bisque; height:120px;"></div>
<div style="background-color: seagreen; height:1200px;"></div>
<div style="background-color: sienna; height:220px;">
<a href="">关于百度</a>
<a href="">About Baidu</a>
<a href="">使用百度前必读</a>
<a href="">帮助中心</a>
</div> -->
<!-- -------------3）纯左右结构 ----------->
<!-- <div style="background-color: bisque; height:1200px; width:25%;"></div>
<div style="background-color: hotpink; height:1200px; width:60%;"></div>
<div style="background-color: rebeccapurple; height:1200px; width:15%;"></div>
<style>
div{
float: left;
}
</style> -->
<!-- -------------4) 上加左右结构 ------------>
<!-- <div style="background-color: bisque; height:120px; width:100%;"></div>
<div style="background-color: hotpink; height:1200px; width:60%;"></div>
<div style="background-color: rebeccapurple; height:1200px; width:40%;"></div>
<style>
div{
float: left;
}
</style>
-->
<div id="box2">
<ul id="u1">
<li>京东首页</li>
<li>|</li>
<li>河南</li>
</ul>
<ul id="u2">
<li>你好，请登录</li>
<li>|</li>
<li>免费注册</li>
<li>|</li>
<li>我的订单</li>
<li>|</li>
<li>我的京东</li>
<li>|</li>
<li>京东会员</li>
</ul>
</div>
<style>
#box2{
height: 45px;
background-color: rgb(228, 228, 228);
}
#u1{
float: left;
}
#u2{
float: right;
}
#box2 li{
float: left;
margin-left: 20px;
}
#box2>ul{
list-style-type:none;
}
</style>
</body>
</html>
四、定位
<!-- 1.定位
定位相关属性：left、right、top、bottom、position，前面四个属性是用来设置距离的，position是用来选参考对象。
1）距离属性
left - 当前标签的左边到参考标签左边的距离
right - 当前标签的右边到参考标签右边的距离
top - 当前标签的上边到参考标签上边的距离
bottom - 当前标签的下边到参考标签下边的距离
注意：只设置距离不设置参考对象，距离无效
2）position属性
absolute(绝对定位) - 将第一个position属性值不为默认值(initial、static)的父辈标签作为参考对象
注意：除了body以外，所有的标签在没有给position属性赋值的时候position的值是initial
relative(相对定位) - 将标签的position设置为relative，是为了让当前标签能够成为其后代标签绝对定位的时候的参考对象
ixed(相对浏览器定位) - 直接将浏览器作为参考对象
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box4" style="background-color: red; width: 800px; height: 600px;">
<div id="box3" style="background-color: yellowgreen; width: 600px; height: 400px;">
<div id="box2" style="background-color: blueviolet; width: 400px; height: 300px;">
<div id="box1" style="background-color: blue; width: 100px; height: 100px;"></div>
</div>
</div>
</div>
<style>
#box4{
position: relative;
}
#box1{
right: 20px;
position: absolute;
}
</style>
<div style="background-color: hotpink; width: 100px; height: 3100px;"></div>
<button>退出</button>
<style>
button{
right: 30px;
bottom: 30px;
position: fixed;
}
</style>
</body>
</html>
五、盒子模型
<!-- 1.什么是盒子模型
每一个标签都是由content、padding、border和margin四个部分组成，四个构成的整体就是盒子模型
1）content(内容) - 设置标签的宽度和高度就是在设置content的大小;
给标签添加内容（包括子标签）是添加到content上的；
2）padding(内边距) - 设置标签的背景颜色和背景图，会同时作用于标签的padding和content
标签如果需要内边距，内边距需要单独设置。
3)margin（外边框） - 不可见但是占位置
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1" style="width: 100px; height: 100px; background-color: aquamarine;">
我是div1
</div>
<br>
<style>
#div1{
/* -----1.设置内边距 ------*/
/* 1）同时设置四个边的内边距大小 */
/* padding: 20px; */
/* 2)单独设置某个方向的内边距 */
padding-left: 30px;
padding-top: 30px;
}
</style>
<div id="div2">
<img src="img/yonghu.png"">
<input type="text">
</div>
<style>
#div2{
width: 250px;
height: 38px;
/* background-color: aquamarine; */
border: 1px solid gray;
}
#div2>input{
height: 30px;
/* 设置垂直对齐方式：top、bottom、middle */
vertical-align: top;
/* 去掉边框 */
border: none;
width:200px;
/* 去掉选中后出现的边框 */
outline: none;
/* padding-left: 20px; */
/* line-height 垂直方向居中 */
}
#div2>img{
width: 37px;
height: 37px;
border-right: 1px solid darkgray;
}
</style>
<br>
<a id="a1" href="">你好</a>
<style>
#a1{
background: url(img/d.jpg);
padding: 20px;
border-radius: 50px;
}
</style>
<br>
<!-- 外边距的使用 -->
<div id="div3">
<div></div>
<div></div>
<div></div>
</div>
<style>
#div3>div{
width: 100px;
height: 100px;
background-color: blanchedalmond;
float: left;
/* 1）同时设置四个边的外边距 */
/* margin: 10px; */
/* 2)单独设置一个方向的外边距 */
margin-right: 20px;
}
</style>
</body>
</html>
扫一扫
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
