css后续篇
5.盒模型
在css中,box model这一术语是用来设计和布局时使用的,在网页中显示一些方方正正的盒子,这种盒子就叫盒模型
盒模型有两种: 标准模型和IE模型(了解)
盒模型属性
width : 内容的宽度
height : 内容的高度
padding : 内边距,边框到内容的距离,padding区域是有背景颜色的,且背景颜色和内容的颜色一样,也就是说background-color这个属性将填充所有的border以内的区域
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
border : 边框 ,盒子的宽度
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
/*上 左右 下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;边框有三个要素,粗细,线性样式,颜色,(如不写粗细不显示边框,不写颜色默认黑色,只写线性样式,默认有上下左右 3px宽度的实体黑色边框
按照三要素来写border
border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/
/*设置顺序 ：上 右 左 下*/
/*border-style: 实线，点状，双线，虚线*/
按照方向划分设置小属性
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
按照方向设置
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;
设置border没有样式
border:none；
border：0；
表示border没有设置样式。
border-radius属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.box1{
width: 200px;
height: 200px;
border-radius: 20px;
background-color: #f0809d;
}
div.box2{
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #7ef0c2;
}
div.box3{
width: 200px;
height: 200px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: #b589f0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>利用border画三角形
margin : 外边框,盒子边框到附近盒子的距离
在写网页的时候,一般要清除页面标签中的padding和margin,以便我们更好的去调整元素的位置
{
padding:0;
margin:0;
}效率不高,所以我们要是用并集选择器选中页面中应有的标签,搜索reset.css,可找到方法
设置margin
/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
/*表示盒子距离右面的盒子100px*/
margin-right: 100px;
/*表示盒子距离下面的盒子100px*/
margin-bottom: 100px;
margin的塌陷
html:
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
css:
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
border: 1px solid gray;
/*float: left;*/
}
.box1{
width: 300px;
height: 200px;
margin-bottom: 20px;
/*float: left;*/
}
.box2{
width: 400px;
height: 300px;
margin-top: 50px;
/*float: left;*/
}
/*
当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候注意margin的用法。
当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
*/
margin : 0 auto;
div{
width: 780px;
height: 50px;
/*水平居中盒子*/
margin: 0px auto;
/*水平居中文字*/
text-align: center;
}
/*当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？
设置margin-left:auto；我们发现盒子尽可能远离左侧，当设置margin-right:auto；我们发现盒子尽可能远离右侧。当两条语句并存的时候，我们发现盒子尽可能远离两侧，此时盒子就居中了。
如果给盒子设置浮动，那么margin:0 auto失效。
使用margin：0 auto;注意点：
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
*/
善于使用父亲的padding,而不是margin
margin属性是描述兄弟盒子的关系,而padding描述的是父子盒子的关系
给父盒子设定border,或者padding,那么父盒子就不会因为子盒子的原因掉下来
6.标准文档流
web网页的制作,从上往下设计,
空白折叠现象
高矮不齐,底边对齐
图片文档的大小不一都会让页面出现高矮不齐的现象,但是遵循底边对齐
自动换行,一行写不满,换行写
7.块级元素和行内元素的转换
行内元素
与其他行内元素并排
不能设置宽高,默认的宽度就是文字的宽度
块级元素
霸占一行,不能与其他元素并列
能设置宽高,如果不设置宽高,那么宽度将默认变为父亲的100%
相互转换
可以通过display属性将会计元素和行内元素进行互相转换,display即"显示模式"
块级元素转换为行内元素
display: inline;
行内元素转换为块级元素
display: block;
8.css脱离标准文档流的三种方式
浮动 ; float
属性
none:表示不浮动,默认
left,左浮动
right,右浮动
四大特性
浮动的元素会脱离标准文档流
浮动的元素互相贴靠
浮动的元素有"子围”效果
当div浮动,p不浮动,div遮盖了p,div的层级提高,但是p中的文字不会被遮盖,此时就形成了子围效果
收缩的效果
一个浮动的元素,如果没有设置width,那么就自动收缩为文字的高度
清除浮动
给父盒子设定高度,但是使用不灵活,常用于页面中固定高度,且子元素并排显示的布局,比如导航栏
clear:both
left:当前元素的左边不许有浮动的元素
right: 当前元素的有边不许有浮动的元素
both:两边都不许有
伪元素清除法(常用)
给浮动子元素的父盒子,也就是不浮动元素,添加一个clearfix类,然后设置
.clearfix:after{
/*必须要写这三句话*/
content: '.';
clear: both;
display: block;
}
overflow:hidden
overflow属性规定当内容溢出元素框时发生的事情。
说明：
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
有五个值：
值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
定位
定位分为三种:决定定位,相对定位,固定定位
相对定位
现象和使用：
1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right
特性：1.不脱标 2.形影分离 3.老家留坑（占着茅房不拉屎，恶心人）
所以说相对定位在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果
用途：
1.微调元素位置
2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。
绝对定位
特性：1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。
参考点(重点)：
一、单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置 2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
二、以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
还要注意，绝对定位的盒子无视父辈的padding
作用：页面布局常见的“父相子绝”，一定要会！！！！
固定定位
固定当前的元素不会随着页面滚动而滚动
特性: 1.脱标 2.遮盖，提升层级 3.固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点 如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告
z-index
指的就是各个盒子重叠在一起谁上谁下的问题。
四大特性，只要你记住了，页面布局就不会出现找不到盒子的情况。
z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用
8.文本属性和字体属性
文本属性
属性 描述 属性值 说明 text-align 文本对齐方式 nonecenterleftrightjustify color 文本颜色 text-indent 首行缩进，单位建议em text-decoration 规定文本修饰的样式 none underline overline line-throughinherit 默认下划线定义文本上的一条线定义穿过文本下的一条线继承父元素text-decoration属性的值 line-height 行高 针对单行文本垂直居中公式：行高=盒子高度，使文本垂直居中，只适用单行文本。针对多行文本垂直居中行高不能小于字体，不然字会紧挨一起。 text-shadow 阴影 5px 5px 5px #FF0000 水平方向偏移量垂直方向偏移量模糊度阴影颜色 text-overflow 文字溢出 clipellipsis 修剪文本显示省略号代表被修剪文本 white-space 处理元素内的空白 normalprenowrappre-wrappre-lineinherit 默认。空白被浏览器忽略。空白会被浏览器保留文本不换行，直到遇到 保留空白符序列，但正常地进行换行合并空白符序列，但是保留换行符继承父元素 white-space 属性的值
字体属性
属性 描述 属性值 说明 text-align 文本对齐方式 nonecenterleftrightjustify color 文本颜色 text-indent 首行缩进，单位建议em text-decoration 规定文本修饰的样式 none underline overline line-throughinherit 默认下划线定义文本上的一条线定义穿过文本下的一条线继承父元素text-decoration属性的值 line-height 行高 针对单行文本垂直居中公式：行高=盒子高度，使文本垂直居中，只适用单行文本。针对多行文本垂直居中行高不能小于字体，不然字会紧挨一起。 text-shadow 阴影 5px 5px 5px #FF0000 水平方向偏移量垂直方向偏移量模糊度阴影颜色 text-overflow 文字溢出 clipellipsis 修剪文本显示省略号代表被修剪文本 white-space 处理元素内的空白 normalprenowrappre-wrappre-lineinherit 默认。空白被浏览器忽略。空白会被浏览器保留文本不换行，直到遇到 保留空白符序列，但正常地进行换行合并空白符序列，但是保留换行符继承父元素 white-space 属性的值
9.background
background-color : 背景颜色
background-image : 背景图片
background-repeat：设置背景图像的平铺方式 repeatrepeat-xrepeat-yno-repeateinherit 默认。背景图像将在垂直方向和水平方向重复背景图像将在水平方向重复背景图像将在垂直方向重复背景图像将仅显示一次规定应该从父元素继承 background-repeat 属性的设置 background-position：设置背景图像的起始位置 垂直位置 水平位置 可以从两个纬度上设定关键词：上中下 左中右垂直位置：top center bottom水平位置：left center right如仅规定了一个关键词，那么第二个值将是"center"。默认值：0 0；这两个值必须挨在一起。 background-attachment：设置固定的背景图像 scrollfixedinherit 默认值。背景图像会随着页面其余部分的滚动而移动。当页面的其余部分滚动时，背景图像不会移动。规定应该从父元素继承 background-attachment 属性的设置。
css后续篇的更多相关文章
- ArcGIS API for Silverlight加载google地图（后续篇）
原文:ArcGIS API for Silverlight加载google地图(后续篇) 之前在博客中(http://blog.csdn.net/taomanman/article/details/8 ...
- [译]Autoprefixer:用最可行的方式处理浏览器前缀的CSS后处理器
Autoprefixer,通过Can I Use数据库来确定哪些浏览器前缀是需要的,然后解析CSS文件,将前缀添加到CSS规则里. 你所要做的就是添加你的资源构建工具(比如:Grunt),然后你就可以 ...
- 【CSS学习笔记】初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容
第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里. 在<li>中设置背景图片的尺寸,地址,不重复, ...
- 在js或css后加?v= 版本号不让浏览器缓存
客户端会缓存css或js文件,改变版本号,客户端浏览器就会重新下载新的js或css文件,在js或css后加?v= 版本号的用法如下 代码如下: <span style="font-si ...
- 引用js或css后加?v= 版本号的用法
<span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version ...
- 引用js或css后加?v= 版本号的用法(转)
<span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?version ...
- vs2015web工程中的html引用压缩后css后无法智能提示的问题解决
环境:win10x64 vs2015企业版 项目:空白web项目(.net framework4) 问题:html页面加入压缩后的css(eg:bootstrap.min.css),编码的时候无法智能 ...
- Webpack打包css后z-index被重新计算的解决方法
发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...
- 基于服务的SOA架构_后续篇
今天是元宵节,首先祝各位广大博友在接下来的光阴中技术更上一层,事事如意! 昨天简单介绍了一下本人在近期开发过的一个电商购物平台的架构流程和一些技术说明:今天将详细总结一下在项目中用到的各个架构技术的环 ...
随机推荐
- Linux-课后练习（第二章命令）20200217-1
- HTML5新标签使用及CSS选择器(伪类)
这些标签能够让搜索引擎更直接的解析页面内容. <header></header>语义:文档或者页面的头部 <nav></nav>语义:导航这两者不是组合 ...
- Angular表单 （一）表单简介
Angular 表单 angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...
- JavaScript中的深浅拷贝
深浅拷贝 在JS中,数据类型分为两类: 简单数据类型:Number.Boolean.String.undefined 引用数据类型:Array.Object.Function 简单数据类型通常 ...
- 程序中出现list assignment index out of range的解决方法
class stack: def __init__(self): self.num = 0 self.elem=[] def isEmoty(self): if self.num == 0: prin ...
- LeetCode——155. 最小栈
设计一个支持 push,pop,top 操作,并能在常数时间内检索到最小元素的栈. push(x) -- 将元素 x 推入栈中. pop() -- 删除栈顶的元素. top() -- 获取栈顶元素. ...
- 周末畅谈 | 我是如何在硅谷获得年薪30万美金Offer的？
本文讲述了一位硅谷软件工程师的面试经验,他分享了他如何在硅谷拿到最终30万美金年薪的Offer,原文摘自:https://blog.usejournal.com/how-i-negotiated-a- ...
- SQL基础教程（第2版）第8章 SQL高级处理：8-1 窗口函数
第8章 SQL高级处理:8-1 窗口函数 ● 窗口函数可以进行排序.生成序列号等一般的聚合函数无法实现的高级操作.● 理解PARTITION BY和ORDER BY这两个关键字的含义十分重要. ■什么 ...
- Python说文解字_杂谈03
1. 我们从前面的知识得到,所有的类都要继承自object这个基类(超类),另外我们知道“继承”可以继承类的属性和方法.我们起始通过type创建类的时候,自然而然的也会从ojbect继承他的一些属性和 ...
- web前端学习 roadmap
<tag attribute="value">content</tag>