Home > Article > Web Front-end > DIV+CSS web page standardized layout (1)
DIV+CSS web page standardized layout (1)
- WBOYOriginal
- 2016-09-15 11:15:161237browse
1. DIV+CSS definition and advantages
Div+css what is it?
Div+css is a currently popular web page layout technology
Div is used to store the data that needs to be displayed (text, charts...), and css is used to specify how to display it, so as to achieve the mutual effect of data and display
Div+css advantages
- Websites using DIV+CSS mode have the following advantages:
- Separation of performance and content
- The code is concise and improves page browsing speed
- Easy to maintain and revise
- Improve search engine indexing efficiency of web pages
We can simply understand div+css like this:
div is a container used to store content (text, pictures, elements).
css is used to specify how the content placed in the div is displayed, including the position and appearance of the content.
2. “Meaningless” HTML elements div and span
- HTML is just a means of giving content. Most HTML tags have their meaning (for example, the p tag creates a paragraph, the h1 tag creates a title, etc.). However, the div and span tags don’t seem to have any content. The meaning sounds as useless as a hammer made of foam. But in fact, combined with CSS, they are widely used. All you need to remember is that span and div are "meaningless" tags. They exist purely to apply styles, so they have no effect when the style sheet is invalid
- They are used to combine into a large piece of HTML code and assign certain information. Most of them are associated with elements using the class attribute and the identification attribute id. The difference between span and div is that span is inline and used in a small piece of inline HTML. The div (division) element is block-level (simply put, it is equivalent to having line breaks before and after it). It is used to combine a large block of code and provide structure and background elements for large blocks of content in HTML documents. Can contain paragraphs, headings, tables and even other parts, which makes it easy to create different integrated classes. Everything between the start and end tags of the div is used to form this block, and the properties of the contained elements are controlled by the attributes of the div tag, or by formatting the block using a stylesheet
- 3. Box model of page layout
margin (margin/border)
- border
- padding (padding/padding)
- Let’s look at the picture to understand the role of each attribute:
The above attributes are divided into four directions: top, right, bottom and left
Question: How to calculate the width and height of page elements?
Answer: The actual occupancy size of the element = element size + padding + border width For example: the actual occupancy height of the element = height attribute + upper and lower padding + upper and lower border width
We can understand it through a classic 3D three-dimensional structure diagram of the box model, as shown in the picture:
Looking from top to bottom, the hierarchical relationship is as follows:
1st Layer: border of the box, Layer 2: content, padding of the element
Layer 3: background-image
Layer 4: background-color )
.
4. Declare the CSS properties of the box model
For example:
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;">27c48d4b480ea592f362334f61449049</span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;">bbc65f352f95f28f7193d35048c6c028</span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;">b02ec9dc6c1602e2b6b318511e1f5134</span>盒子模型<span style="color: #0000ff;">00184704c11e7804493feb92cf7cb2ef</span>
<span style="color: #008080;"> 4</span> <span style="color: #0000ff;">3b21e6c8c45975c3ab5015aaf5f6e09a</span>
<span style="color: #008080;"> 5</span> <span style="background-color: #f5f5f5; color: #800000;"> #box </span><span style="background-color: #f5f5f5; color: #000000;">{</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> ID为box的盒子模型 </span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
<span style="color: #008080;"> 6</span> <span style="background-color: #f5f5f5; color: #ff0000;"> width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> 盒子的宽度为200px </span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
<span style="color: #008080;"> 7</span> <span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> 盒子的高度为200px </span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
<span style="color: #008080;"> 8</span> <span style="background-color: #f5f5f5; color: #ff0000;"> border</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">5px solid #ccc</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> 盒子边框实线各边宽5px </span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
<span style="color: #008080;"> 9</span> <span style="background-color: #f5f5f5; color: #ff0000;"> padding</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">10px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> 盒子的4个内填充为10px </span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
<span style="color: #008080;">10</span> <span style="background-color: #f5f5f5; color: #ff0000;"> margin</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> 盒子的4个外边距为10px </span><span style="background-color: #f5f5f5; color: #008000;">*/</span>
<span style="color: #008080;">11</span> <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #008080;">12</span> <span style="color: #0000ff;">6d2d69a16dc4083b65da95a7bbc232fc</span>
<span style="color: #008080;">13</span> <span style="color: #0000ff;">aeb804e38082af6a3e321b6e6edf51e6</span>
<span style="color: #008080;">14</span> <span style="color: #0000ff;">a229620ab34e403a9a516194c8a41e62</span>
<span style="color: #008080;">15</span> <span style="color: #0000ff;">941948d131608d3bbd3182d0847d486d</span> <span style="color: #008000;">3b14c52bbed11619f9cd728ee3142748</span>
<span style="color: #008080;">16</span> 内容区 <span style="color: #008000;">5164c38746a89c244a4e0b9ed1c77900</span>
<span style="color: #008080;">17</span> <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
<span style="color: #008080;">18</span> <span style="color: #0000ff;">17c48f9384b0d7f54ab6024d7c7070f0</span>
<span style="color: #008080;">19</span> <span style="color: #0000ff;">aa335abca1c4625a6feacef5476fb458</span>
- 水平居中和垂直居中
水平居中包含两种情况：
块级元素的水平居中：margin:0px auto;
文字内容的水平居中：text-align: center;
垂直居中：
常见的单行文字的垂直居中可设置文字所在行的height与
行高样式属性一致，比如：
div{
width: 400px;
height: 400px;
line-height: 400px;/*行高与div高度一致*/
}
5、和页面布局有关的CSS属性
<span style="color: #008080;"> 1</span> <span style="color: #000000;">#box { /* 声明ID选择器，名称为box */
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;"> position:absolute; /* 设置层的定位为绝对定位 */
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;"> top:30px; /* 层距离顶点纵向坐标的距离为30个像素 */
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;"> left:100px; /* 层距离左点横向坐标的距离为100个像素 */
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;"> width:300px; /* 设置层的宽度为300个像素 */
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;"> height:150px; /* 设置层的高度为150个像素 */
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;"> overflow:auto; /* 当内容超出层的范围时显示滚动条 */
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;"> z-index:1; /* 设置层的先后顺序为覆盖关系 */
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;"> visibility:visible; /* 无论父层是否可见，子层都可见 */
</span><span style="color: #008080;">10</span> }
6、盒子区块框的定位
层模型--绝对定位
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
<span style="color: #008080;">1</span> <span style="color: #000000;">div{
</span><span style="color: #008080;">2</span> <span style="color: #000000;"> width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;"> height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;"> border:2px red solid;
</span><span style="color: #008080;">5</span> <span style="color: #000000;"> position:absolute;
</span><span style="color: #008080;">6</span> <span style="color: #000000;"> left:100px;
</span><span style="color: #008080;">7</span> <span style="color: #000000;"> top:50px;
</span><span style="color: #008080;">8</span> <span style="color: #000000;">}
</span><span style="color: #008080;">9</span> <span style="color: #0000ff;">2beeb2847e934999dc8b5f8f0e43d3704d765cbf8ce485a2a526f75a4eba1cce</span>
效果如下：
层模型--相对定位
如果想为元素设置层模型中的相对定位，需要设置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 id="div1"></div>
效果图：
什么叫做“偏移前的位置保留不动”呢？
大家可以做一个实验，在右侧代码编辑器的19行div标签的后面加入一个span标签，在标并在span标签中写入一些文字。如下代码：
<body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>
效果图：
从效果图中可以明显的看出，虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。
层模型--固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
<span style="color: #008080;"> 1</span> <span style="color: #000000;">#div1{
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;"> width:200px;
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;"> height:200px;
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;"> border:2px red solid;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;"> position:fixed;
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;"> left:100px;
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;"> top:50px;
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">}
</span><span style="color: #008080;"> 9</span> <span style="color: #0000ff;">fed9cad356cec09afa3e2a7bd2513208</span>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。<span style="color: #0000ff;">aea4995305aa2743a243ce011e9fcbb5</span>
<span style="color: #008080;">10</span> <span style="color: #000000;">....
</span><span style="color: #008080;">11</span>
7、盒子模型的浮动布局
理解浮动属性首先要搞清楚，什么是文档流？
文档流：浏览器根据元素在html文档中出现的顺序，
从左向右，从上到下依次排列
浮动属性是CSS中的定位属性，用法如下：
float: 浮动方向(left、right、none);
left为左浮动、right为右浮动、none是默认值表示不浮动
，设置元素的浮动，该元素将脱离文档流，向左或向右移动
直到它的外边距碰到父元素的边框或另一个浮动元素的边
框为止
浮动示例，没有使用浮动的3个DIV：
HTML结构代码：
d3fab1b19d9189e674f68deba711554b第1块div16b28748ea4df4d9c2150843fecfba68
ae78b0f312e3cd17c752800dca089cb8第2块div16b28748ea4df4d9c2150843fecfba68
fea615dfb05f736e3bd17ab45ca4723c第3块div16b28748ea4df4d9c2150843fecfba68
CSS样式代码：
#first, #second, #third{
width:100px;
height:50px;
border:1px #333 solid;
margin:5px;
}
执行效果如图：
样式中加入 float:left;
执行效果如图：
你再修改为 float: right试试右浮动是什么效果
16、让商品分类DIV、内容DIV和右侧DIV并排放置
HTML结构代码：
<span style="color: #008080;">1</span> <span style="color: #0000ff;">b1eb2d049a98b832a15ce4e67a0ba6fb</span> <span style="color: #008080;">2</span> <span style="color: #0000ff;">d213585df1e0f83a5edcf9ba5cb23584</span>顶部（header）<span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span> <span style="color: #008080;">3</span> <span style="color: #0000ff;">2dcbab911e86918bb87930c44b157116</span> <span style="color: #008080;">4</span> <span style="color: #0000ff;">c9824ab01ffe476d6dd9a26c91b462d9</span>商品分类(cat)<span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span> <span style="color: #008080;">5</span> <span style="color: #0000ff;">a245cabac94856ec8c1c6435e515db93</span>内容(content)<span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span> <span style="color: #008080;">6</span> <span style="color: #0000ff;">b752951f3a017539241b4ef99e1feead</span>右侧(sidebar)<span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span> <span style="color: #008080;">7</span> <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span> <span style="color: #008080;">8</span> <span style="color: #0000ff;">d6e1399c2bd1e37f5c64c24e7f458b1f</span>底部（footer）<span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span> <span style="color: #008080;">9</span> <span style="color: #0000ff;">4d765cbf8ce485a2a526f75a4eba1cce</span>
CSS样式代码(在第13节CSS代码基础上加入)：
<span style="color: #008080;"> 1</span> <span style="color: #000000;">.cat, .sidebar {
</span><span style="color: #008080;"> 2</span> <span style="color: #000000;"> float:left;
</span><span style="color: #008080;"> 3</span> <span style="color: #000000;"> width:20%;
</span><span style="color: #008080;"> 4</span> <span style="color: #000000;"> height:100%;
</span><span style="color: #008080;"> 5</span> <span style="color: #000000;"> }
</span><span style="color: #008080;"> 6</span> <span style="color: #000000;"> .content {
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;"> float:left;
</span><span style="color: #008080;"> 8</span> <span style="color: #000000;"> width:60%;
</span><span style="color: #008080;"> 9</span> <span style="color: #000000;"> height:100%;
</span><span style="color: #008080;">10</span> }
17、clear清除
clear只对块级元素有效，表示如果前一个元素存在左浮动或右浮动，则换行
clear属性的取值：rigth、left、both、none