CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式, 如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的 文字有着统一的字体、字号或者颜色等。
CSS语法 选择符 { 属性:值}
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和
外部式三种。
优先级:内联式 > 嵌入式 > 外部式 ?
离被设置元素越近优先级别越高
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些 css样式的前后顺序来决定,处于最后面的css样式会被应用。
p{color:red;} p{color:green;} <p class="first">hello world</p>
!important语句可以把样式改变为最高权值
p{color:red !important;} p{color:green;} <p class="first">hello world</p>
颜色值
长度值
在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素(display: block)有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素(display: inline)有: <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素(display: inline-block)有: <img>、<input>
流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流
动模型来分布网页内容的。 流动布局模型具有2个比较典型的特征:
浮动模型,浮动(Float)如果想让两个块状元素并排显示,需要用到浮动模型。
Div { width:200px; height:200px; border:2px red solid; float:left; }
<div id="div1"> </div> <div id="div2"> </div>
什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够 精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用 层布局还是有其方便之处的
层模型有三种形式:
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元 素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块 进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、 bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元 素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、 bottom属性确定,偏移前的位置保留不动。
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕 位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会 受文档流动影响
详细介绍请参考:https://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/
.flex-container {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
<ul class="flex-container">
<li class="flex-item"><imgsrc="//placehold.it/300&text=1"></li>
<li class="flex-item"><img src="//placehold.it/300&text=2"></li>
<li class="flex-item"><img src="//placehold.it/300&text=3"></li>
<li class="flex-item"><img src="//placehold.it/300&text=4"></li>
<li class="flex-item"><img src="//placehold.it/300&text=5"></li>
<li class="flex-item"><img src="//placehold.it/300&text=6"></li>
</ul>
.flex-item {
padding: 5px;
}
• 水平居中设置-行内元素
通过给父元素设置 text-align:center 来实现的
• 水平居中设置-定宽块状元素
通过设置“左右margin”值为“auto”来实现居中的
• 水平居中设置-不定宽块状元素方法
• 垂直居中-父元素高度确定的单行文本
通过设置父元素的 height 和 line-height 高度一致来实现的
• 垂直居中-父元素高度确定的多行文本