CSS布局模型
布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。
CSS包含3种基本的布局模型,用英文概括为:Flow、Layer 和 Float。
在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
一、流动模型
先来说一说流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征:
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100%。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)。
二、浮动模型
块状元素这么霸道都是独占一行,如果现在我们想让两个块状元素并排显示,怎么办呢?不要着急,设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的,但可以用CSS定义为浮动,如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
效果图:
设置两个元素一左一右可以实现一行显示:
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
效果图:
三、层模型
什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
层模型有三种形式:
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
☆绝对定位(position: absolute)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
效果图:
☆相对定位(position: relative)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px,向右移动100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
什么叫做“偏移前的位置保留不动”呢?
如在div标签的后面加入一个span标签,在标并在span标签中写入一些文字。如下代码:
☆固定定位(position: fixed)
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。
☆Relative与Absolute组合使用
学习了绝对定位的方法:使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位以后,大家有没有想过可不可以相对于其它元素进行定位呢?答案是肯定的,当然可以。使用position:relative来帮忙,但是必须遵守下面规范:
1、参照定位的元素必须是相对定位元素的前辈元素:
CSS code abbreviation
☆Box model code abbreviation
When talking about the box model, the margins, padding and Border settings The margins in the four directions of top, bottom, left, and right are set in a clockwise direction: top, right, bottom, left. Examples of specific applications in margin and padding are as follows:
margin: 10px 15px 12px 14px;/*The top is set to 10px, the right is set to 15px, the bottom is set to 12px, and the left is set to 14px*/
Usually there are the following three An abbreviation method:
1. If the values of top, right, bottom and left are the same, as in the following code:
margin:10px 10px 10px 10px;
can be abbreviated as:
margin:10px;
2. If the values of top and bottom are the same, and the values of left and right are the same, as in the following code:
margin:10px 20px 10px 20px;
can be abbreviated to:
margin:10px 20px;
3. If the values of left and right are the same, as in the following code:
margin: 10px 20px 30px 20px;
can be abbreviated to:
margin: 10px 20px 30px;
Note: abbreviations for padding and border The method is the same as margin.
☆Color value abbreviation
The css style of color can also be abbreviated. When the color you set is a hexadecimal color value, if the value of each two digits is the same, it can be abbreviated. half.
Example 1:
p{color: #000000;}
can be abbreviated as:
p{color: #000;}
Example 2:
p{color: #336699 ;}
can be abbreviated as:
p{color: #369;}
☆Font abbreviation
The font css style code in the web page also has its own abbreviation, as follows It is the code to set the font for the web page:
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px ;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
So many lines of code can actually be abbreviated to one sentence:
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
Note:
1. To use this abbreviation, you must at least specify font-size and font- family attribute, other attributes (such as font-weight, font-style, font-varient, line-height) will automatically use the default value if not specified.
2. When abbreviating, add "/" diagonally between font-size and line-height.
Generally, because there is relatively little English for Chinese websites, the following abbreviation codes are more commonly used:
body{
font:12px/1.5em "宋体",sans-serif;
}
There are only font size, line spacing, Chinese font, and English font settings.
Units and values in CSS
☆Color value
The color setting in the web page is very important, including font color (color), background Color (background-color), border color (border), etc., there are many ways to set color:
1. English command color
p{color:red;}
2. RGB color
This is consistent with the RGB color in photoshop, which is matched by the ratio of the three colors R (red), G (green), and B (blue).
p{color:rgb(133,45,200);}
The value of each item can be an integer between 0 and 255, or a percentage between 0% and 100%. For example:
p{color:rgb(20%,33%,25%);}
3. Hexadecimal color
This color setting method is a more commonly used method now. Its principle In fact, it is also an RGB setting, but the value of each item is changed from 0-255 to hexadecimal 00-ff.
p{color:#00ffff;}
Color table:
☆Length value
Summary of length units. Currently, px (pixel), em, and % are commonly used. It should be noted that these three units are actually relative units.
1. Pixel
Why is pixel a relative unit? Because pixels refer to small dots on the display (the CSS specification assumes "90 pixels = 1 inch"). The actual situation is that the browser will use the actual pixel value of the display. At present, most designers tend to use pixels (px) as the unit.
2. em
is the font-size value of the given font of this element. If the font-size of the element is 14px, then 1em = 14px; if the font-size is 18px, then 1em = 18px. The following code:
p{font-size:12px;text-indent:2em;}
The above code can achieve the indentation of the first line of the paragraph by 24px (that is, the distance between the two font sizes).
Note a special case below:
But when the unit of font-size is set to em, the calculation standard is based on the font-size of the parent element of p. The following code:
html:
Take this example as an example.