CSS盒子模型

一个独立的盒子模型由内容、border（边框）、padding（内边距）、margin（外边距）4部分组成。

一个盒子的实际宽度（或高度）是有内容+padding（两边）+border（两边）+margin（两边）组成。

边框（border）

border-color属性：指定边框的颜色。

border-width属性：指定边框粗细程度。

border-style属性：指定边框样式。如果没有指定边框样式，那么其他的属性都将不起作用，边框将不存在。

border-radius属性：用于创建圆角边框，还可以为元素创建圆角背景。

box-shadow属性：用于向边框添加阴影。

内容

width和height属性指定盒子能显示的宽度和高度，它有三种值：自动（auto，根据内容自动调整width和height的值）、固定值、百分比（width和height占父元素width和height的百分比）。

overflow属性用于处理当盒子内容超出范围是该怎么处理，分为auto(自动判断是否超出范围，超出后自动显示滚动条)、hidden（超出显示范围的部分隐藏）、scroll（强制显示滚动条）、visible(溢出部分也显示，此值为overflow的默认值)。

paddding(内边距)

可以分别设置，padding-bottom,padding-top,padding-left,padding-right。

margin(内边距)

和padding一样，但是margin的值可以为负数(当为负数时，向相反的方向移动)。

标准文档流

1、块级元素（block）

总是一个块的形式在网页中显示，在其父元素中会自动换行，与同级元素会按照顺序依次垂直排列，如p,h1,ul,li,div等。

2、行内元素（inline）

在父元素内水平排列，知道最右端才自动换行。如strong,a,span等。

盒子的浮动与定位

1、盒子的浮动(float)

float属性的默认值为none,当设置为left时，靠近左侧，在默认情况下盒子的宽度不在延伸，而是能容纳下里面内容的最小宽度。当块级设置为浮动后，将脱离“标准流”。

2、盒子的定位

可以利用position属性来指定元素的位置，共有四个值静态定位（static 表示在元素中的默认位置，没有移动）、相对定位（relative ，还需要设置left,right,top,bottom来指定，可以是固定值和百分比）、绝对定位（absolute,按照最近的祖先元素，还需指定偏移量，和相对定位一样）、固定定位（fixed 与绝对定位有些相似，但是参照的是浏览器窗口）。

display属性

可以用来确定元素的类型（块级或者行内），对于块级元素，默认是block，行内元素默认是inline，还可以改变类型，或者把元素隐藏起来。

span{display:block;}
p{display:inline;}
div{display:none;}

CSS内容排版

CSS设置文字样式

1、字体

p{font-family:'黑体';}

2、文字大小

p{fontsize:12px;}

3、文字加粗，可以通过<b>、<strong>加粗。也可以用font-weight属性。

p{font-weight:normal;/*正常粗细*/
font-weight:bold;/*粗体*/
font-weight:bolder;/*加粗体*/
font-weight:lighter;/*比正常要细*/
font-weight:100~900;/*字体越大文字越粗*/
}

4、文字倾斜

p{font-style:italic;/*意大利体 */
font-style:normal;/* 正常*/
font-style:oblique;/*倾斜 */
}

5文字复合属性，直接用font属性，可以设置字体大小加粗倾斜。

6、文字颜色，用color属性。

7、文字下划线和删除线

h1{text-decoration:underline overline;/*下划线+顶划线*/}
h2{text-decoration:line-through;/*添加删除线*/}
h3{text-decoration:blink;/*文字闪烁，仅部分浏览器支持*/}

8、英文字母大小写转换

p{text-transform:capitalize;/*单词首字母大写*/}
p{text-transform:lowercase;/*全部小写*/}
p{text-transform:uppercase;/*全部大写*/}

9、文字的水平对齐

p{text-align:left;/*左对齐，浏览器默认*/}
p{text-align:right;/*右对齐*/}
p{text-align:center;/*居中*/}
p{text-align:justify;/*两端对齐*/}

10、文字行高，通过line-height属性来设置，可以用相对（百分比）也可以用绝对（像素为单位）。

11、段落首行缩进，通过text-indent属性。

12、段落间距，通过设置p元素的margin间距即可。

图像样式

1、图像边框

<img src="图像路径" border="2">

2、图像缩放

img{width:50%;/*相对大小，会等比例缩放*/}

3、图像对齐，通过设置其父元素的text-align属性来设置水平对齐，设置vertical-align属性来设置垂直方向的对齐。

CSS背景样式

1、背景颜色

div{background-color:red;}

2、背景图像

div{background-image:url(图片路径);}

3、图像平铺

div{background-image:url(图片路径);
background-repeat:repeat;/*水平和垂直两个方向平铺，默认值*/
background-repeat:no-repeat;/*不平铺*/
background-repeat:repeat-x;/*水平平铺*/
background-repeat:}repeat-y;/*垂直平铺*/

4、固定图像位置，用backgroung-attachment属性来设置。

CSS设置列表样式

1、列表符号，用list-style-type属性设置<ul>或者<ol>，Disc(实心圆)，Cricle(空心圆)，square(正方形)，decimal(1，2，3，4....),upper-alpha（A,B,C...）,lower-alpha(a,b,c...),None(不显示任何符号)。

2、图像符号，用list-style-image属性。

ul{list-style-image:url(图像路径);}

CSS页面布局及排版相关推荐

20个不错的CSS页面布局相关资源推荐
本篇文章搜集整理的是CSS页面布局的一个很长的列表.如果你时间很少,那么可以下载已经准备好的CSS页面布局,如果你想进行个性化的尝试,下面列出了一些站点你可以不需过多努力而达到效果. 漂亮.免费的CS ...
CSS页面布局（超详解）
目录 1 CSS页面布局概述 1.1 概述 1.2 网页栏目划分 1.3 元素类型转化 1.3.1 块元素 1.3.2 行内元素 1.3.2 块元素和行内元素的转换 1.4 定位 1.4.1 静态定位 ...
html超链接样式顺序,CSS页面布局常用知识汇总（超链接样式）
CSS中的知识非常多,我们不可能全都记得住.闲暇时整理了一些CSS页面布局的常用知识,这篇文章就和大家分享一下CSS超链接样式的常用知识.需要的朋友可以参考一下,希望可以帮助到你. 设计网页时,我们可 ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
day54 css页面布局
目录一网页布局方式二标准流三浮动流一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad++等等而网页的 ...
vue在html中写style,vue开发之style（六）（CSS页面布局之样式、背景、文字）
最近在学vue开发,并且将学习笔记与大家一起分享,前面讲了vue环境的搭建: 基于vscode的Vue前端环境搭建问题及解决办法还有vue的使用,重点就在webpack这个: vue开发之webpa ...
div css 登录页面布局,DIV+CSS页面布局
页面布局设计一.三行模式或三列模式特点:把整个页面水平.垂直分成三个区域. 三行模式:将页面分成头部.主体及页脚三部分三列模式:将页面分成左.中.右三个部分在CSS文件里: 1.三行模式代码 ...
分享 10 个常见的 CSS 页面布局代码片段
大家好,本篇文章将分享我们业务中很常见的10个页面布局代码片段,这10 种页面布局很常见,实现方式也有很多种,本篇文章将用最简单的新方式进行实现,希望对大家有所启发. 1.Card layout(卡片 ...
常见的CSS页面布局方式
详情:CSS页面结构是我们日常生活中最常使用到的,当然目前可能大家用的最多的是elementUI实现布局,简单方柏霓,下面介绍几种常见的原生页面布局的方式公共的样式部分 <style>* ...

CSS页面布局及排版