一、盒子模型

css盒子模型本质上是一个盒子，封装周围的html元素，它包括：边框、外边框、内边框和实际内容。

1.边框（border）

语法：border：border-width（定义边框粗细，单位是px） border-style（边框的样式） border-color（边框样式）；
（复合写法也是这样的，没有顺序区别，一般是这个顺序，注意英文的标点符号）
例：border:1px solid red;

border-style：none（无边框） || solid（实线边框） || double（双线边框）
（以上仅三种常用边框，具体可去css查阅）
边框的四个边框可以分开设置属性：border-top，border-bottom，border-left，border-right
（然后可以得到一个华丽呼哨的边框）
相邻单元格的边框不会重合，只会并在一起（边框会影响盒子大小，边框会额外增加盒子大小），所以需要合并单元格的边框：border-collaspse:colapse;

<html>
<head><style>.red {width: 250px;height: 250px;background-color: blue;border-top: 2px none black;border-bottom: 5px solid black;border-left: 10px double pink;border-right: 20px solid pink;}.green {width: 250px;height: 250px;background-color: cyan;}</style>
</head>
<body><div class="red"></div><div class="green"></div>
</body>
</html>

效果图：

2.内边距（padding）

内边距：盒子内容与边框的距离。

语法：padding：像素；

（如果给盒子设置了宽高，内边距会额外增加盒子大小；如果没有给盒子设置宽高，内边距对盒子没有影响）
可以分为上下左右四个内边距：padding-top，padding-bottom，padding-left，padding-right。
padding后面的像素可以放1-4个像素值。
如：

padding: 5px;（上下左右内边距都是5px）
padding: 5px 10px;（上下内边距5px，左右内边距10px）
padding: 5px 10px 20px;（上内边距5px，左右内边距10px，下内边距20px）
padding: 5px 10px 20px 30px;（上5px，右10px，下20px，上30px，顺时针）

<html>
<head><style>.red {width: 250px;height: 250px;color: beige;background-color: blue;padding: 5px 10px 20px 30px;}.green {width: 250px;height: 250px;background-color: cyan;}</style>
</head>
<body><div class="red">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div><div class="green">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
</body>
</html>

效果图：

3.外边距（margin）

外边距：用于设置盒子和盒子之间的距离。

语法：margin：像素；

可以分为上下左右四个外边距：margin-top，margin-bottom，margin-left，margin-right。
margin后面的像素也可以放1-4个像素值。
语法和padding一样。

外边距可以让块级盒子水平居中，但是必须满足两个条件：

  • 盒子必须指定了宽度
  • 盒子左右的外边距都设置为auto，一般是margin: 0 auto;

（注意：以上是让块元素水平居中，如果要让行内元素和行内块元素水平居中，给其父元素添加text-align:center;即可）

<html>
<head><style>.red {width: 250px;height: 250px;color: beige;background-color: blue;margin: 5px 10px 20px 30px;}.green {width: 250px;height: 250px;background-color: cyan;}.blue {width: 250px;height: 250px;background-color: cadetblue;margin: 0 auto;}</style>
</head>
<body><div class="red">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div><div class="green">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div><div class="blue">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
</body>
</html>

效果图：

示意图：

·外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

1）相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距，下面的元素有上外边距，两个外边距不会取两值的和，会取两个值中的最大值。
解决方案：尽量只给其中一个盒子加margin值。

2）嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距时，父元素会塌陷较大的外边距值，而子元素表现相对父元素不变。
解决方案：

  • 可以为父元素定义上边框
  • 可以为父元素定义上内边距
  • 可以为父元素添加overflow:hidden

·清除内外边距

*{margin: 0;padding: 0;
}

一般这个作为css的第一句话，因为清楚了更方便设置样式
注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距（设置了也没有上下外边距）。但是转换为块级和行内元素就可以了。

4.圆角边框

语法：border-radius：length（圆角圆的半径）；

radius半径原理：圆与边框的交集形成的圆角效果。

  • 如果想得到一个圆形的盒子可以使属性值=一半的正方形边长或者border-radius:50%。
  • 如果想得到一个圆角矩形的盒子可以使属性值=一半的长方形的宽。

盒子的四个角可以分别设置，如：

  • 将四个角合并写border-radius: 10px 20px 30px 40px;（顺时针，分别是左上，右上，右下，左下）
  • 将四个角分开写border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-right-radius
<html>
<head><style>.red {width: 250px;height: 250px;color: yellow;background-color: blue;border-radius: 125px;}.green {width: 250px;height: 250px;background-color: cyan;border-radius: 10px 20px 40px 80px;}.blue {width: 250px;height: 250px;background-color: cadetblue;}</style>
</head>
<body><div class="red">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div><div class="green">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div><div class="blue">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
</body>
</html>

效果图：

5.盒子阴影

语法：box-shadow：h-shadow（水平阴影的位置，允许负数） v-shadow（垂直阴影的位置，允许负数） blur（模糊距离，数越大越模糊） spread（阴影的尺寸） color（阴影的颜色） inset（将外部阴影（outset）改为内部阴影，默认外部阴影，在写的时候不能写outset，只在需要转换为内部阴影的时候写）

h-shadow和v-shadow是必须要写的两个值，其他都是可以不写的值。
盒子阴影不占用空间，不会影响盒子的排列。

/!--如果盒子没有阴影，经过的时候有阴影--/
div:hover {box-shadow:10px 10px;
}

<html>
<head><style>.red {width: 250px;height: 250px;color: yellow;background-color: blue;margin-bottom: 100px;box-shadow: 25px 40px 20px grey;}.green {width: 250px;height: 250px;background-color: cyan;}</style>
</head>
<body><div class="red">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div><div class="green">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
</body>
</html>

效果图：

6.文字阴影

语法：text-shadow：h-shadow（水平阴影的位置，允许负数） v-shadow（垂直阴影的位置，允许负数） blur（模糊距离，数越大越模糊） color（阴影的颜色）

h-shadow和v-shadow是必须要写的两个值，其他都是可以不写的值。

二、浮动

CSS提供了三种传统布局：标准流，浮动和定位

1.标准流

标准流：又叫普通流或文档流，指的是标签按照规定好的默认方式排列，是最基本的网页布局方式

1.块级元素会独占一行，从上向下顺序排列

  • 常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table

2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

  • 常用元素：span、a、i、em等

2.浮动

浮动语法和特点

浮动可以改变元素默认的排列方式
浮动最典型的应用可以让多个块级元素一行内排列显示，且中间的间隙可以改变（如果只是将块级元素改为行内块元素，中间的间隙是无法更改的）
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：float：none（元素不浮动）|| left（元素向左浮动）|| right（元素向右浮动）；

  • 浮动元素会脱离标准流（俗称脱标）
  • 浮动元素会一行内显示并且元素顶部对齐
  • 浮动元素会具有行内块元素的特性

设置了浮动（float）的元素最重要特性：

  • 脱离标准流的控制移动到指定位置（脱标）
  • 浮动的盒子不再保留原先的位置

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

<html>
<head><style>.red {width: 250px;height: 250px;color: yellow;background-color: blue;float: left;}.green {width: 250px;height: 250px;background-color: cyan;float: right;}</style>
</head>
<body><div class="red">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div><div class="green">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
</body>
</html>

效果图：

浮动元素经常和标准流父级搭配使用

  • 为了约束浮动元素的位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。（浮动和标准流的父盒子搭配）
  • 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟盒子也应该浮动，以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
  • 一般不给浮动盒子底下的标准流盒子设置高度，子盒子会将父盒子扩大。

清除浮动

  • 清除浮动的本质是清除浮动元素造成的影响
  • 如果父盒子本身有高度，则不需要清除浮动
  • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：clear：left（不允许左侧有浮动元素，清除左侧浮动的影响）|| right（不允许右侧有浮动元素，清除右侧浮动的影响）|| both（同时清除左右两侧浮动的影响，常用）

清除浮动的策略是：闭合浮动
清除浮动的方法有四种：

1.额外标签法

额外标签法也成为隔墙法。
在浮动元素末尾添加一个空的标签，例如< div style=“clear:both” >< /div >，或者其他标签（如< br/ >等）

  • 优点：通俗易懂，书写方便
  • 缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素，比如< span >就不能用

2.父级添加overflow属性

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。

  • 优点：代码简洁
  • 缺点：无法显示溢出的部分

3.父级添加after伪属性

给父元素添加类，父元素< div class=“clearfix” >< /div >

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix {
/*IE6、7专有*/*zoom: 1;
}
  • 优点：没有增加标签，结构更简单
  • 缺点：照顾低版本浏览器

4.父级添加双伪元素

给父元素添加类，父元素< div class=“clearfix” >< /div >

.clearfix:before,
clearfix:after {content: "";display: table;
}
.clearfix:after {clear: both;
}
.clearfix {
/*IE6、7专有*/*zoom: 1;
}
  • 优点：代码更简洁；
  • 缺点：照顾低版本浏览器；

清除浮动总结

清除浮动的原因：

  • 父级没有高度
  • 子盒子浮动了
  • 影响下面布局了，我们就应该清除浮动了
浮动清除的方式 优点 缺点
额外标签法 通俗易懂，书写方便 添加许多无意义的标签，结构化较差
父级overflow:hidden 书写简单 溢出隐藏
父级after伪元素 结构语义化正确 由于IE6、7不支持:after，兼容性问题
父级双伪元素 结构语义化正确 由于IE6、7不支持:after，兼容性问题

三、定位（position）

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式+边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

语法：position：static（静态定位）|| relative（相对定位）|| absolute（绝对定位）|| fixed（固定定位）|| sticky（粘性定位）；

1.静态定位（static）

语法：position：static；

静态定位是元素的默认定位方式，无定位的意思。

  • 静态定位按照标准流特性摆放位置，它没有边偏移
  • 静态定位在布局时很少用到

2.相对定位（relative）*

语法：position：relative；

相对定位是元素在移动位置的时候，是相对于它原来的位置说的。

  • 它是相对于自己原来的位置移动的（移动位置的时候参照点是自己原来的位置）。
  • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）
<html>
<head><style>.red {width: 250px;height: 250px;color: yellow;background-color: blue;position: relative;left: 50px;top: 50px;}.green {width: 250px;height: 250px;background-color: cyan;}</style>
</head>
<body><div class="red">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div><div class="green">长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。怨灵修之浩荡兮，终不察夫民心。众女嫉余之蛾眉兮，谣诼谓余以善淫。固时俗之工巧兮，偭规矩而改错。背绳墨以追曲兮，竞周容以为度。忳郁邑余侘傺兮，吾独穷困乎此时也。宁溘死以流亡兮，余不忍为此态也。</div>
</body>
</html>

效果图：

3.绝对定位（absolute）*

语法：position：absolute；

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的。

  • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
  • 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动的元素
  • 绝对定位不再占有原先的位置

子绝父相的由来

子级用绝对定位的时候，父级要用相对定位

  • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
  • 父盒子需要加定位限制子盒子在父盒子内显示。
  • 父盒子布局时，需要占有位置，因此父元素只能时相对定位

相对定位经常用来作为绝对定位的父级

<html>
<head><style>.red {width: 500px;height: 500px;color: yellow;background-color: blue;margin: 0 auto;}.green {width: 250px;height: 250px;background-color: cyan;position: absolute;left: 50px;top: 50px;}.blue {width: 750px;height: 750px;background-color: cadetblue;position: relative;}</style>
</head>
<div><div class="blue"><div class="red"><div class="green"></div></div></div>
</body>
</html>

效果图：

4.固定定位（fixed）*

语法：position：fixed；

固定定位时元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

  • 以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动。
  • 固定定位不再占有原先的位置，固定定位也是脱标的，可以看作是一种绝对的特殊定位。

固定定位小技巧：固定在版心右侧位置

1.让固定定位的盒子left:50%。
2.然后让固定定位的盒子margin-left:版心宽度的一半距离。

<html>
<head><style>.red {width: 250px;height: 250px;background-color: blue;position: fixed;right: 50%;margin-right: -125px;}.green {width: 250px;height: 250px;background-color: cyan;position: fixed;left: 0;top: 200px;}</style>
</head>
<body><div class="red"></div><div class="green"></div>
</body>
</html>

效果图：无论浏览器框放大或缩小，盒子所在位置相对于浏览器都不变

5.粘性定位（sticky）

语法：position：sticky；top：10px；

粘性定位可以被认为是相对定位和固定定位的混合

  • 以浏览器的可视窗口为参照点移动元素（固定定位特点）
  • 粘性定位占有原先的位置（相对定位的特点）
  • 必须添加top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE不支持

6.定位总结

定位模式 是否脱标 移动位置 是否常用
static静态定位 否 不能使用边偏移 很少
relative相对定位 否（占有位置） 相对于自身位置移动 常用
absolute绝对定位 是（不占有位置） 带有定位的父级 常用
fixed固定定位 是（不占有位置） 浏览器可视区 常用
sticky粘性定位 否（占有位置） 浏览器可视区 当前阶段很少

7.定位叠放次序（z-index）

语法：z-index：1；

在使用定位布局时，可能会出现盒子重叠的情况，此时可以使用z-index来控制盒子的前后顺序（z轴）

  • 数据可以时正整数、负整数或0，默认时auto，数值越大，盒子越靠上
  • 如果属性值相同，则按照书写顺序，后来居上
  • 数字后面不能加单位
  • 只有定位的盒子才有z-index属性

8.定位的拓展

1.绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下方式实现居中
1.left:50%; 让盒子的左侧移动到父级元素的水平中心位置；
2.margin-left:-盒子宽度的一半;让盒子向左移动自身宽度的一半；

如果一个盒子既有left属性和right属性，则会默认执行left属性，同理，top和bottom属性中，默认执行top属性。

2.定位特殊特性

绝对定位和固定定位也和浮动类似‘

  • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
  • 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小时内容的大小。

3.脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

4.绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
但是绝对定位（固定定位）会压住下面标准流的所有内容

网页布局三种方式总结

1.标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
2.浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
3.定位
定位最大的特点时有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

CSS第二部分——网页布局三大核心相关推荐

  1. html中的分离式布局,DIV+CSS技术在网页布局中的应用

    摘 要 信息科学技术的进步使得互联网技术行业快速发展起来.其中网页设计作为互联网技术行业中重要的一部分,应用先进技术提高其工作效率与工作质量具有重要意义.DIV+CSS技术在网页布局中的优势作用使得其 ...

  2. 《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]

    电驴资源 下面是用户共享的文件列表,安装电驴后,您可以点击这些文件名进行下载 [Div.CSS.3.0网页布局案例精粹].王大远.扫描版.rar详情 53.7MB 全选 53.7MB 下载地址(拷贝到 ...

  3. CSS浮动/常见网页布局/清除浮动/学成在线案例

    CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式 网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...

  4. CSS 7：网页布局（传统布局，flex布局，布局套路）

    传统布局 一栏.两栏.三栏布局 一栏布局 特点:页面内容居中,宽度固定 实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...

  5. 60个高质量的CSS、XHTML网页布局模板下载

    无论您下载和解剖预建模板是为了学习最新的CSS布局技术,或者下载的目的是为了易于编辑制作现成的独立网站,您都不应该仅限于免费且可用的一个拥有众多克隆版本.陈旧的且往往是枯燥的模板.网页设计的流行趋势和 ...

  6. web前端入门到实战：css基础-定位+网页布局案例

    position:static 忽略top/bottom/left/right或者z-index position:relative 设置相对定位的元素不会脱离文档流 position:fixed 不 ...

  7. CSS盒子模型/页面布局

    1.盒子模型 页面布局要学习三大核心,盒子模型,浮动和定位.学好盒子模型对我们布局页面帮助很大! 1.1看透网页布局的本质 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 利用CSS设置 ...

  8. CSS学习笔记5CSS的三大特性与盒子模型

    CSS的三大特性 CSS有三个非常重要的特性:层叠性.继承性.优先级. 层叠性 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一种冲突的样式.层叠性主要是解决样式冲突的问题 层叠性原则: ...

  9. 应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt

    <利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...

最新文章

  1. Python3中的json对象与python对象转化
  2. 17、任务十六——事件委托机制、简单表单验证
  3. $.ajax和$.load的区别
  4. 题意解读+详细题解-Leecode 319. 灯泡开关——Leecode每日一题系列
  5. CSS 技巧tips1
  6. 顺时针打印3*3矩阵
  7. 解决Hbase输入list，创建表报错，输入status可以，org.apache.hadoop.hbase.ipc.ServerNotRunningYetException: S
  8. mysql @ $_mysql常见笔试题
  9. 记一次ElasticSearch 更改 mapping 字段类型的过程
  10. 成功EDM电子邮件营销的要素和目标分析
  11. 【小知识】二分类问题，应该选择sigmoid还是softmax？
  12. Microchip具有SDI和SQI接口串行SRAM存储器23LC512
  13. Google引擎搜索技巧
  14. SOLO代码踩过的各种坑
  15. Android相机拍照后，对照片模糊的处理；对照片旋转90度的处理
  16. vscode遇到无法访问此网站问题的两种解决方法
  17. 2017年美国计算机科学,2017年U.S.News美国大学研究生计算机科学专业排名TOP10
  18. React中自定义高阶组件的应用（HOC）
  19. 程序员一般通过什么途径接私活？怎样做兼职程序员接私活？
  20. CA周记 - 在 Azure ML 上用 .NET 跑机器学习

热门文章

  1. Debian 制作U盘安装盘启动器
  2. 美国哈佛学院计算机硕士,美国计算机硕士申请 专业方向介绍以及院校推荐
  3. Kibana原型污染导致远程执行代码 CVE-2019-7609 漏洞复现
  4. [折腾向]树莓派3B+安装系统（Raspbian）以及配置环境
  5. React实现文件上传过程中取消上传
  6. 两个质数互质是_两个质数一定是互质数_互质数和质数的区别_分解质因数的方法_互为质数和互质数...
  7. 今日金融词汇--- 高杠杆模式
  8. 1993年入市一老股民愤然离场 今年已亏55万
  9. Centos查看磁盘占用，管理磁盘空间
  10. 火狐浏览器CSS兼容的解决方法~