[19/05/20-星期一] CSS_css的盒子模型
一、盒子模型
<!DOCTYPE html>
<html>
<!--
div 标签 块级标签 主要用来网页布局， 会将其中的子元素内容作为一个独立的整体存在
默认宽度是页面宽度，可以设置
没有默认高度，但可以设置，可以顶开 如果子元素设置百分比的高或宽，占据的是div的百分比，不是页面的
盒子模型：
把每个元素都想象成盒子，那么对网页的模型就相当于摆放盒子
分成几个部分：
内容区(content)：元素
内边距(padding): 电视机与纸箱中间塞的泡沫的长度
边框(border): 纸箱的外边缘
外边距(margin):距离其它盒子的距离
-->
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style type="text/css">
.box1{ /*盒子的大小=内容区+内边距+边框*/
width: 300px;/*使用width和height来设置内容区的宽度和高度 整个盒子的大小肯定比它大*/
height: 300px;
background-color: #98FB98; /*设置背景颜色 豆沙绿*/ /*为元素设置边框 3个样式缺一不可 但是只写一个,浏览器会采用默认值, 但是3个都不写,边框的默认值是none
* border-width ：边框的宽度 border-color：边框的颜色 border-style：边框的样式
* color和style都适用于如同宽度这样四个边的设置
* 除了这样设置，还可以：
* border-XX-width xx可能为top right bottom left 专门设置指定边的宽度
* border-XX-color
* border-XX-style
*/
border-width:10px 20px 30px 40px ; /*上→右→下→左 顺时针顺序 设置边框的宽度*/
border-width:10px 20px 30px ; /*上=10px 左右=20px 下=30px 这样设置*/
border-width:10px 20px ; /*上和下=10px 左右=20px 这样设置*/
border-width:10px ;/*如果只有一个值，则上下左右=10px*/ border-color:red ; /*style的可选择：
solid 实线 dotted 点状边框 dashed 虚线 double 双线 none 没有边框
* */
border-style:solid ; /*边框的简写 同时写3个 没有先后顺序 但是他们指定的都是4个边
border-XX ：20px green solid; 可以单独设置每个边的样式
border：20px green solid;
border-top:none;除了上边其余3个边都是这样设置
*/
border: 20px green solid; /*内边距(padding) 4个方向 内边距会影响盒子可见框的大小 元素的背景会延伸到内边距
* padding-XX 设置上下左右
*/
padding: 20px; /*外部距(margin) 4个方向 不会影响可见框的大小 只是影响盒子的位置 它扩大了元素的所占区域
由于页面的元素都是靠上和靠左,会导致盒子自身位置的改变 因为默认是贴左边
社会右和下，会导致其他盒子的位置的改变 自己不变
设置为负数，元素会向反方向移动
margin-top:100px ; 正数是向下移动 负数向上
还可以设置为auto 一般只设置为水平方向 ，如果只指定左外边距或右外边距 设置为auto 则其为最大值
垂直方向设置为auto 默认值为0 不会变化
left和right同时设置auto 则两侧外边距为相同的值 就可以使这个元素在父元素中水平居中
简写 margin：10px 20px 30px 40px
margin:0 auto; 上下0 左右居中
* */
margin-top:100px ;
margin-left:auto ;
margin-right: auto; }
.box2{ /*使用的子元素把父元素的内容区占满*/
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head> <body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"> </div> </body>
</html>
二、定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ccs的定位</title>
<style type="text/css">
#div01{
border: solid 2px orange;
height: 200px;
width: 800px;
margin-bottom:10px ;
margin-top:50px ;
position: relative;/*给div01添加相对定位，成为其子元素绝对定位的参照元素*/
}
#div01-01{
border: solid 3px ;
height: 50px;
width: 100px;
position: absolute;/*使用绝对定位，可以使元素参照界面或父元素来进行移动*/
top: 10px;
}
#div02{
border: dashed 2px coral;
height: 200px;
width: 800px;
margin-bottom:10px ;
position: relative;/*使用相对定位： 相对于元素原有位置移动*/
left: 50px;/*相对于元素原来的位置移动50px 等于左边空出50px的位置 其它元素位置是不动的*/
top: 100px;
background-color:coral ;
z-index: 1;
}
#div03{
border: solid 2px #FF7F50;
height: 200px;
width: 800px;
position: relative;
background-color:rosybrown ;
z-index: 2; /*优先显示div3*/
}
#div04{
border: solid 2px brown;
height: 50px;
width: 100px;
position: fixed;/*固定定位：不会随着滚动的移动而移动，不管其他div盒子如何移动 它就是不动 这里通常可以加个二维码*/
top: 270px;
right: 10px;
}
</style>
</head>
<body>
<div id="div01">
<div id="div01-01"></div>
</div>
<div id="div02">我是div2</div>
<div id="div03"></div>
<div id="div04"></div>
</body>
</html>
三、模拟百度首页
css文件
/*设置基础样式*/
*{
margin: 0;
padding: 0;
} /*设置header部分 */
#header{/*实际中其属性设置可以在同一行*/
width: 100%;
height: 45px; }
/*设置导航栏部分*/
#header_nav{
position: absolute;
right: 92px;
top: 26px;
}
#header_nav li{
float: left;
list-style-type: none ;
margin-left:24px ;
}
#header_nav li a{
color: #333;
font-size: 13px;
font-weight:700 ;
line-height: 24px;
}
/*设置main部分*/
#main{
width: 100%;
height: 384px; text-align: center;
}
#img_logo{
margin-top:30px ;
margin-bottom: 21px;
}
input[type=text]{
height: 34px;
width: 539px;
border: solid 1px #4992ff;
background-image: url(../img/input.jpg);
background-repeat:no-repeat ;
background-position-x:500px ;
background-position-y:3px ;
}
input[type=submit]{
height: 34px;
width: 100px;
font-size:15px ;
color: #fff;
background-color: #2d78f4;
border: solid #2d78f4;
letter-spacing: 1px;
position: relative;
right: 5px;
top: 1px;
} /*设置footer部分*/
#footer{
width: 100%;
height: 206px;
text-align: center;
}
/*使用伪类加样式* 当鼠标放在链接上变颜色/
#header_nav li a:hover{
color: #2D78F4;
}
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--1、使用css+div来布局 css代码使用外链接
2、使用HTML进行每个块中页面的填充
-->
<title>模拟百度首页</title>
<link rel="stylesheet" type="text/css" href="baidu.css"/>
<!--引入网页标题图片-->
<link href="" rel="shortcut icon" />
</head>
<body>
<!--声明头部-->
<div id="header">
<ul id="header_nav">
<li><a href=""> 新闻</a></li>
<li><a href=""> hao123</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>
<li><a href=""> 设置</a></li>
</ul>
</div>
<!--声明主体-->
<div id="main">
<!--引入网站logo-->
<img id="img_logo" src="../img/logo.png" width="270px" height="129px"/> <br />
<form action="https://www.baidu.com/s" method="get">
<input type="text" name="wd" id="" value=""/>
<input type="submit" value="百度一下"/>
</form> <!--声明搜索框-->
</div>
<!--声明底部-->
<div id="footer">
<img id="img_footer" src="../img/footer.jpg" />
</div>
</body>
</html>
[19/05/20-星期一] CSS_css的盒子模型的更多相关文章
- [19/05/19-星期日] CSS_css的声明和选择器
一.引言 HTML的作用是负责数据的格式展示,如果使用它来搞数据的样式,则发现样式书写出来太麻烦,不易于维护: HTML可以有效组织数据的展示,但是不同类型数据在浏览器中的分布没有办法展示. HTML ...
- [19/06/06-星期四] CSS基础_盒子模型
一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒 ...
- CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- 盒子模型、IFC、BFC和Collapsing margins
前言 盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习 ...
- QSS 盒子模型
每个 Widget 所在的范围都是一个矩形区域(无规则窗口也是一个矩形,只是有的地方是透明的,看上去不是一个矩形),像是一个盒子一样.QSS 支持盒子模型(Box Model),和 CSS 的盒子模型 ...
- HTML+CSS教程（五）外联样式、组选择器、圆角边框、样式优先级、伪类、盒子模型、元素溢出
一.外联样式 通过link标签引入外部css文件夹中的xxx.css文件到head标签中 例: 二. 1.组选择器 选择器名称1,选择器名称2,选择器名称3,…{属性:属性值;属性;属性值} 例: & ...
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
- 标准盒子模型和IE盒子模型
标准盒子模型 ＝ margin + border + padding + content (content = width | height) IE盒子模型 ＝ margin + content ( ...
- CSS边距---盒子模型
CSS盒子模型 盒子模型主要是有margin(外边距).border(边框).padding(内边距).content(内容)组成,这些属性我们可以把它转移到我们日常生活中的盒子上来理解,日常生活中所 ...
随机推荐
- linux添加头文件路径
gcc demo.c -o demo -I/tools/libevent/include -L/tools/libevent/lib -levent -I:头文件目录 -L:静态库目录 -l:静态库 ...
- ASP.NET Core 基础知识（三） Program.cs类
ASP.NET Framework应用程序是严重依赖于IIS的,System.Web 中有很多方法都是直接调用的 IIS API,并且它还是驻留在IIS进程中的.而 ASP.NET Core 的运行则 ...
- 缓存promise技术不错哦
1. pageManager.js const promiseList = {}; module.exports = { putData: function(pageName,data){ promi ...
- OI比赛常数优化
这是一篇玄学文章 一.编译优化 #pragma GCC optimize("O3") #pragma G++ optimize("O3") 预处理开O3优化 比 ...
- css图标与文字对齐实现方法
1.移动端(安卓设备.ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局,可以快捷有效实现子元素未知高度绝对垂直居中对齐.PC端考虑到兼容性的问题,一般不推荐使用弹性盒子,依旧只能采 ...
- vue组件学习(一)
1, vue中的 is 的用法,有时候我们需要把一个组件绑定到指定的标签下,比如把tr组件放到table下,直接这样写是不行的, <!DOCTYPE html> <html lang ...
- BZOJ 3329: Xorequ(数位dp+递推)
传送门 解题思路 可以把原式移项得\(x\)^\(2x\)=\(3x\),而\(x+2x=3x\),说明\(x\)二进制下不能有两个连续的\(1\).那么第一问就是一个简单的数位\(dp\),第二问考 ...
- es的索引库模板
在实际的生产中,如果要插入大批量数据的时候需要使用多个索引库,如果我们还是手工指定每个索引的配置信息settings和mappings,是非常耗时的: 针对这种情况,es有index template ...
- 5 November
拓扑排序 for (int i=1; i<=n; ++i) if (!ind[i]) q.push(i); while (!q.empty()) { int now=q.top(); q.pop ...
- jquery attr()方法获取input的checked属性问题
问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性 ...