CSS小白入门

CSS基础

1、css引入方式

1、外部样式表，把CSS样式代码写在独立的一个文件中扩展名：CSS文件名.CSS
引入外部文件：<link href="XX.css"rel="stylesheet"type="text/css"/><link>要放在<head>标签之间
2、CSS导入式
@import "css.css" @import url(css.css);

2、CSS使用方法的优先级

优先级
行内样式＞内部样式＞外部样式
说明：
1.链入外部样式与内部样式表之间的优先级取决于所处位置的先后
2.最后定义的优先级最高（就近原则）

CSS选择器

1、标签选择器

以HTML标签作为选择器：如，p{color:red;font-size:30px;}

2、类选择器

1、为HTML标签添加class属性：（在开始标签添加）

<h1 class="special">内容</h1>

2、通过类选择器来为具有此class属性的元素设置css样式，如：.special{color:red;}
注意：

  • 可对不同类型元素的同一个名称的类选择器设置不同的样式规则,如：p.special{font-size:30px;}（在类选择器前面加上标签名就可以，这样只有设置了class为special的p标签才会生效）
  • 同一元素可以设置多个类，之间用空格隔开如：<p class="special special1>内容</p>

3、id选择器

为HTML标签添加ID属性：如

<p id="p1">内容1</p>
<p id="p2">内容2</p>

通过ID选择器来为具有此ID的元素设置CSS规则：

#p1{color:red;}
#p2{color:blue;}

ID选择器与类选择器区别：(class是点，id是#)

  • 1.id不能像class元素添加在多种元素上面，因为id是唯一的
  • 2.同一种元素一般不能引用多种id的样式；除有一些浏览器可以，就算可以也会影响到以后其他功能的识别
  • 3.同一个文件下面，每一个id是唯一的

4、群组选择器与全局选择器

  • 群组选择器可以设置同一个样式（标签选择器（h1），ID选择器（#h1），类选择（.h1）器）注意：class和id的名字是区分大小写的如写错会显示不出来效果
    p.special,#three,p,h1,h2{color:red:}
  • 全局选择器：给所有标签设置样式
    *{ 属性:值; 属性:值; 属性:值; 属性:值; }

5、后代选择器

即通过标签的父子关系对标签设置样式，如：
```
p a em{ ...} //代表p标签中包含a标签中的em标签所使用的样式
#p1 em{...} //代表id为p1的标签中的em标签所使用的样式
p.red a em{...} //代表class为red的p标签中的a标签中的em标签所使用的样式

 ```

5、伪类选择器

定义标签不同状态下显示不同的样式，举个栗子：

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF}/* 选定的链接 */

注意：

  •  a:hobver 必须置于a:link 和 a:visited之后，才有效
  • a:active 必须置于a:hover之后，才有效
  • 伪类名称对大小写不敏感
    伪类顺序：link > visted > hover > active

伪类选择器就很多了，常见的就是这些：

:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。

CSS继承与层叠、优先级

1、继承

继承的好处：父元素设置样式，子元素可以继承（部分！）属性，减少CSS代码

  • IE6以下版本border不会继承body的属性，所以用群组的方式进行相应的样式设置
  • 浏览器默认字体为：16px（2em）
  • 当上级元素定义了样式与元素本身默认的样式冲突时，这时它将忽略继承得来的样式即若设定body为12px而h1默认为2em（16）则样式冲突而h1变为24px

2、CSS层叠：

  • 同一个元素可以定义多个样式
  • 若元素不冲突时（不存在两个相同属性的不同值时），多个样式可以层叠为一个（葫芦娃合体葫芦小金刚）
  • 元素冲突时（存在两个相同属性的不同值时）就按就近原则来应用

3、CSS优先级

  • id选择器>class选择器>标签选择器
  • 相同类型定义时，就近原则

css权值
同一样式表中:
1.权值相同（就近原则）；
2.权值不同（哪种权值高，就使用哪种）

  • 选择器权值：

标签选择器：权值为1
类选择器和伪类：权值为10
ID选择器：权值为100
通配符选择器：权值为0
行内样式：权值为1000

  • 权值规则

统计不同选择器个数
选择器个数乘以相应权值
相加所有值得最终权值。
eg: b{color:purple}// 1个
p b{color:yellow} //2个，此权值高

CSS优先级总结

  • !important一定条件下优先级最高。
  • css总样式的优先级：行内>内部样式>外部样式，
    link链入式和style内部样式优先级取决于先后顺序。
  • 样式表中优先级：id>class>标签>通配符，当权值不同根据权值计算总的权值比较，权值相同就近原则

CSS命名规范

  • CSS样式命名
    1.采用英文字母、数字以及“-”和"_"
    2.只能以小写字母开头。
    3.命名形式：单字，连字符 -，下划线 _和驼峰 eg:mainTitle
    4.使用有意义的命名

  • 常用CSS样式命名
    1.页面结构

      页头：header    导航：nav 
      页面主体：main   页尾：footer 
      内容：content/container  容器：container
      侧栏：sidebar    栏目：column 
      页面外围控制：wrapper   左右中：left right center

2.导航

导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar
左导航：leftsidebar 右导航：rightsidebar
菜单：menu 子菜单：submenu 标题:title
摘要：summary

3.功能

标志：logo 广告：banner 登录：login
登录条：loginbar 注册：register
搜索：search 功能区：shop 标题：title
注：id不要滥用，后期JS要用id对文档操作，谨慎使用，适当用class

CSS文本样式

1、字体样式

字体属性

字体：font-family、文字大小：font-size、文字颜色：color、文字粗细：font-weight、文字样式：font-style
font-family属性（具体字体名、字体集）："字体1",“字体2”...
注意：含空格字体名和中文,用英文引号(")括起，多个字体用英文","隔开，引号嵌套，外使用双引号，内使用单引号 。说人话（style="family:'宋体'"）
设置多个字体的好处是，浏览器依次查找如果没有就会使用自带的默认样式
字体集：Serif（会在字体尾部添加一下装饰线）、Sans-serif（没有装饰线）、Monospace、Cursive、Fantasy

字体大小

font-size文字大小：定义元素内文字大小，语法：font-size：绝对单位|相对单位

  • 绝对单位：任何分辨率下显示的都是绝对的大小，不会改变 in英寸、cm厘米、mm毫米、pt磅、pc
    1英寸=2.54厘米，1厘米=0.394英寸，1毫米=0.1厘米，72磅=1英寸，1pc=12pt
  • 当不设置字体大小时，默认为浏览器默认值。
    xx-small（9px）x-small（11px）small（13px）medium（16px）large（19px）x-large（23px）xx-large（28px）
  • 相对单位：px像素 、em/% 、langer、smaller
    em/% 、langer、smaller，都是针对父元素
    px单位值受显示器分辨率影响（在手机端设置大小时，一般不使用px）

字体颜色

语法 color:具体颜色名称/RGB值/16进制
如：color:blue color:rgb(255,255,0) color:rgb(100%,100%,0%) color:#f2f2f2 (0-f) #008822=#082

可以通过查找“网页的安全色“ 查找相应的颜色值

字体样式

font-weight加粗。normal,bold,bloder,lighter
粗细值位100~900一个阈值，因为加粗受字体限制，100~600几乎相同，700~900几乎相同，所以在开发过程中一般用normal、bold，其中normal相当于400粗细值，bold相当于700粗细值.
html中斜体是em、i 
font-style文字格式。normal、italic斜体、oblique倾斜。
font-variant字体变形(针对英文，设置为小型大写字母)。normal、small-caps小型大写字母。

字体属性总结

font属性系列简写，顺序，空格分开是重点
font：font-style font-variant font-weight font-size/font-height font-family。这个顺序很重要
注意：

  • 1、同时设置font-size和font-family，属性才会起作用且必须先size再是family 。
  • 2、style variant weight可以打乱顺序
  • 3、style variant weight必须写在size前面
  • 4、height是行高，必须和size写在一起用分号隔开
    总结：font属性简写的话，每个属性值之间用空格隔开，书写顺序是：font-style font-variant font-weight font-size font-family，如果font-family的值有多个时，值用逗号分开。

2、文本样式

文本对齐方式

  • text-align,设置元素内文本的水平对齐方式，四种对齐方式left,right,center,justify（两端对齐）。
  • 该属性只对块级元素设置有效；不同浏览器会对元素有不同的展示效果。

p{width:50%;margin:0 auto;} 设置浏览器一致显示居中,（上下为0） auto（左右自动）

行高

为了大段文字便于阅读（line-height:长度值|百分比）
注意：

  • 1.当行高为固定值px，且小于字体大小 (font-size>line-height) 时，行与行之间会发生重叠的现象
  • 2.当字体发生什么变化，行高也随之发生变化时，不能用px单位，而是要用em或者%；因为em和%与字体大小有关系。如：
    ·当font-size：20px，line-height：1.3em时，行高=201.3=26px
    ·当font-size：20px，line-height：120%时，行高=20    120%=24px
  • 3.在开发过程中，一般使用em单位来定义
  • 4.浏览器有默认行高，不同浏览器默认行高不一样（一般行高默认为字体的120%）
  • 5.line-height的属性是可以继承的。
    ·继承的是计算后的值，不是直接把em或%的值继承过来

vertical-align属性

作用：设置元素内容的垂直方式，垂直方式的属性只对行内元素和单元格有效，对块级元素不生效
属性有：baseline（默认对齐）、sub（下标对齐）、super（上标对齐）、top（顶线对齐）、text-top（文本顶端对齐）、middle（中线对齐）、bottom（底线对齐）、text-bottom（文本底线对齐）。

前端学习
  • 垂直对齐方式的属性只对行内元素有效。如span、p标签等
  • vertical-align：-15px（向下移）、15px（向上移）、100%向上移
  • 单行文本想要垂直居中则将line-height与高度值相同
  • 多行垂直居中，因为垂直居中属性只能作用于行内元素和单元格元素，所以，先将块级元素转换为单元格，要知道这个思路！！！

1.素转为单元格元素 添加display:table-cell
2将父元素也设置为表格 即添加样式 display:table
3现在才能用用垂直居中 vertical-align:middle

3、文本其他样式

line-height:行高
text-indent:25px首行缩进
文本样式属性
word-spacing：元素内单词之间的间距
letter-spacing：元素内字母之间间距
text-transform：capitalize：首字母大写，uppercase：转成大写，lowercase：转成小写，none：无
text-decoration：underline：下划线，overline： 上划线，line-through：贯穿线（删除线） ，blink：闪烁效果（有兼容性问题） ，none：
text-decoration不可以被继承，这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中

CSS 盒子模型

CSS盒子模型介绍

Laravel

CSS模型属性介绍

1、宽度

宽度属性(width宽度，max-width最大宽度，min-width最小宽度)：是设置内容的宽度，不是元素的宽度
width:长度值(in、cm、px)|百分比|auto(自动);
max-width:长度值(in、cm、px)|百分比|auto(自动);
min-width:长度值(in、cm、px)|百分比|auto(自动);

  • 1当设置了width、max-width或min-width（根据继承的样式与我们设置的样式是否冲突来选择要实现的样式）。max-width、min-width为宽度的界限，若width未超过界限则显示width,超过max,显示max.低于min,显示min.
  • 2.max-width和min-width有兼容性问题，IE6及以下只能识别width的值。
  • 3，同时设置max和min时，width超过max，显示max；低于min，显示min。若设置的max低于min,显示min。
  • 4.%是针对于父元素宽度来设置当前元素的宽度的。

2、高度属性设置

高度属性(使用方法，同宽度属性width基本一致)
高度：height: 长度值/百分比/auto
最大高度：max-height:长度值/百分比/auto
最小高度：min-height:长度值/百分比/auto
注：

  • 1.min与max的高度与宽度设置在IE6及以下不兼容 ，无法实现。
  • 2.float属性（浮动属性）
    例：.p{float：left}——应用这个样式的p标签的内容都在同一行显示，没有换行显示。
  • 3.设置块级元素和替换元素的内容高度（一般内容的高度相当于元素（容器）的高度，因块级元素，占一整行，默认（设置）其他边框、边距都为0px。）
  • 4.height与line-height的区别：height是整个内容（可有多行）的高度（也就是规定一个容器有多高的内容），line-height只是一行的高度（是文本实际高度，所以会出现文本高度line-height超出我们规定的高度height）
  • 5.%是针对于父元素高度来设置当前元素的高度的。

3、border边框属性 (针对元素的边框)

  • 1.边框宽度（border-width），格式如下：
    border-width:thin（窄或薄）|medium（中等）|thick（厚）|长度值(px,em);
  • 2.边框颜色（border-color），格式如下：
    border-color:颜色（三种方式）|transparent（透明）;
  • 3.边框样式（border-style），格式如下：border-style:值;
    值有：none（定义无边框，默认值），hidden（与none相同，除非在表格元素中解决边框冲突时），dotted（定义点状边框，在大多数浏览器中呈现为实现），dashed（定义虚线，在大多数浏览器中呈现为实线），solid（定义实线），double（定义双线），groove（定义3D凹槽边框），ridge（定义3D垄状边框），inset（定义3D inset边框），outset（定义3D outset边框），inherit（规定应该从父元素继承边框样式）。

4、padding 属性

定义：设置元素的内容与边框之间的距离（内边距或填充）。分4个方向（上、右、下、左）格式为：
padding-top:长度值（px）|百分比;
padding-right:长度值|百分比;
padding-bottom:长度值|百分比;
padding-left:长度值|百分比;
说明：

  • 1.值不能为负值
  • 2.盒子在网页中占的空间，不单单与width和height属性有关，还与padding属性有关。
  • padding属性缩写，格式如下：
    padding:值1;——4个方向都为值1
    padding:值1 值2;——上下=值1，左右=值2
    padding:值1 值2 值3;——上=值1，左右=值2，下=值3
    padding:值1 值2 值3 值4;——上=值1，右=值2，下=值3，左=值4（值与值之间用空格隔开。padding属性有4个值时，按照顺时针来排列，即上、右、下、左）
    具体例：padding:10px 5px 8px 20px;

5、margin属性

定义:设置元素与元素之间的距离（外边距，也可理解为4个方向的边框延伸出去的距离）

  • 1.4个方向（上、右、下、左），格式如下：
    margin-top:长度值（px）|百分比|auto;
    margin-right:长度值（px）|百分比|auto;
    margin-bottom:长度值（px）|百分比|auto;
    margin-left:长度值（px）|百分比|auto;

值可以设置为负数

  • 2.margin属性的缩写,格式如下：
    margin:值1;——4个方向都为值1
    margin:值1 值2;——上下=值1，左右=值2
    margin:值1 值2 值3;——上=值1，左右=值2，下=值3
    margin:值1 值2 值3 值4;——上=值1，右=值2，下=值3，左=值4（从”上“开始顺时针，值之间用空格隔开）
  • 3.默认情况下，相应的一些HTML块级元素（body、h1～h6、p等）存在外边距。在开发过程中，为了不受元素本身默认的外边距影响，在开发之前可以声明margin属性，覆盖默认样式。格式：
    body,h1,h2,h3,h4,h5,h6,p{margin:0;}
  • 4.margin值为auto时，实现水平方向居中（本元素相对于父元素而言）显示效果，且由浏览器计算外边距(格式为两种：1.margin:0 auto; 2.margin:auto;)
  • 5.垂直方向（水平方向也一样），两个相邻元素都设置外边距（一个元素的下外边距，一个元素的上外边距（这两者一般设置为一样）），外边距会发生合并（两个外边距合并形成一个外边距）。
    即：合并后两元素之间的距离=两个发生合并的外边距中的最大值

盒子模型计算

width(宽度)=左边框（margin）+左内边距(padding)+内容宽度+右内边距+右边框
height(高度)=上边框+上内边距+内容高度+下内边距+下边框

CSS 盒子模型

ie盒子模型

CSS 盒子模型

注：IE盒子模型与标准盒子模型的区别：width（宽度）和height（高度）所描述的对象不同。

IE盒子模型：（盒子是包含外边距，边框，内边距和内容的）

注意：

  • 1.不使用Doctype文档类型声明，各浏览器按照自己的方式解析。
  • 2.如果有Doctype文档类型声明，按照标准盒子模型来解析。声明方法<!Doctype HTML>

盒子模型的应该

1、display 属性

display属性：

  • 1、inline：元素将显示为内联元素，元素前后没有换行符；
  • 2、block：元素将显示为块级元素，元素前后会有换行符；
    a、 将块级元素设置为内联元素：display：inline；
    b、 将内联元素设置为块级元素：display：block；
    注意：内联元素之间有缝隙，如何去除？
    a、可能是标签之间有换行，那么写代码时不添加换行或者空格就行了；
    b、去外层添加一个父元素，设置父元素的font-size：0px；然后子元素单独设置font-size:16px;
    c、行内元素不具有宽高属性，给其设置宽高不起作用，内边距起作用，外边距上下不起作用；
  • 3、inline-block：行内块元素，元素呈现为inline，具有block相应特性,
    即display：inline-block；（可以设置宽高、内边距、外边距属性）
  • 4、display：none
    实现子元素刚开始不显示，当鼠标经过父元素时显示
    在子元素内设置：display：none；
    在父元素内设置： 父元素：hover 子元素{display：block}鼠标经过时块状显示子元素
    在父元素内设置： 父元素：hover 子元素{display：inline}鼠标经过时行内显示子元素

补充：
html常用块级元素：
p 、div、h1~h6、ul、ui、ol、dl、dt 、dd等
行内元素： span/a/em/input/img

2、盒子模型应用总结

盒子模型应用-案例应用：

  • 1.为了不影响全局，我们首先要对body、p、div等某些元素的margin和padding值设置为0，字体统一设置为微软雅黑，我们也可以直接用通配符。
  • 2.设置顶部水平居中对齐，可用margin:0,auto;
  • 3.先搭建html结构，在写css声明，从外到内，从大到小。
  • 4.一个元素可以赋予多个选择器，在同一个class中用空格隔开。

CSS 背景与列表

CSS背景

1、背景颜色 background-color

语法：backgroud-color:颜色|transparent（默认值）
说明:

  • 1.transparent（透明色）的作用
    如果你不希望某个元素有背景颜色，同时又不希望用户对浏览器的设置影响了你的设计，就有必要设置了。即透明色，其展现形式基本等于没设置。
  • 2.颜色值（颜色名|rgb|十六进制）
  • 3.背景区（背景颜色区域）包括内容、内边距（padding）和边框（border），不包括外边距（margin）

注：边框（border）的设置，不仅需要设置边框宽度，还需要设置边框样式和边框颜色。

  • 如果没有设置边框样式，则边框显示不出来；
  • 边框颜色会覆盖掉背景颜色；
  • 边框颜色在没有设置的时候是默认和（内容中）文本的颜色一样的；——border:20px solid;

2、背景图片

background-image语法：background-image:url(地址)|none;——（none无背景图片）
说明：

  • 1.url地址可以是相对地址也可以是绝对地址。
  • 2.元素的背景图片占据了元素的全部尺寸，包括内容、内边距和边框，但不包括外边距。
  • 3.默认地，背景图片位于元素的左上角，并在水平和垂直方向上重复（当图片大小无法充满元素的全部尺寸时，元素的其余尺寸在水平和垂直方向上重复显示该图片，使图片占据了元素的全部尺寸）。
    注：
    当你既设置背景图片又设置背景颜色的时候，背景图片会覆盖掉背景颜色（与两者代码前后顺序无关，背景图片都会覆盖掉背景颜色）。开发过程中一般会同时设置背景图片和背景颜色，以防图片失效后还可以看到背景颜色。
2.1背景图片重复属性（background-repeat）；必须基于有背景图片的情况下才是有效的。

设置元素的背景图片的重复方式，格式：
background-repeat:repeat|no-repeat|repeat-x|repeat-y;
具体例：background-repeat:no-repeat;
repeat：重复（默认值）
no-repeat：不重复
repeat-x：水平重复
repeat-y：垂直重复（竖直方向重复）

2.2 背景图片显示方式

设置元素的背景图片的显示方式
background-attachment：scroll、fixed
说明：
scroll：默认值，背景图片随滚动条滚动
fixed：当页面的其余部分滚动时，背景图片不会移动

2.3 背景图片定位

图片定位background-position用于定位图片有有以下值

百分比：（x% y%），注：只写一个参数的话，第二个默认为居中

具体数值：（x y），注只写一个参数的话，第二个默认为居中

top：顶部显示，相当于垂直方向（50% 0）

right：右边显示，相当于（100% 50%）

bottom：底部显示，相当于（50% 100%）

left：左边显示，相当于（0 50%）

center：中间显示（50% 50%）
总结：

CSS 盒子模型
2.4 背景图片设置缩写

背景缩写属性（background）
background:background-color background-image background-repeat background-attachment background-position；
具体例：background:#000000 url(img/bg.png) no-repeat top fixed;
说明：

  • 1.各值之间用空格分割，不分先后顺序，可写一个或多个值。
  • 2.当background-attachment 属性是fixed的时候，也就是说，背景图片不随滚动条滚动的时候，那么background-position的值(百分比)，都是相对于整个页面来说的，而不是背景图片的容器来说的，比如，这个时候，我设置居中，就是在整个页面的居中，如果这个时候，我attachment的属性是scroll的话，那么居中，就是针对背景图片的容器说的，

CSS列表样式

1、列表项的标记样式类型

设置列表项的标记样式类型，语法：
list-style-type:关键字|none;——disc是默认值，具体例：list-style-type:circle;list-style-type:lower-roman;
属性值为：

  • 1.无序列表
    none（无标记）、disc（实心的圆点）、circle（空心的圆点）、square（实心的方块）
  • 2.有序列表
    none（无标记）、decimal（从1开始的整数）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）
    注：css列表样式（列表项标记属性）可以将ul设置成有序列表, 将ol设置成无序列表，或者将ul，ol设置成无标记列表。列表项标记属性一般是作用在li标签（有标记的标签）样式上的
2、使用图片来当列表项标记

设置语法：list-style-image: url(图片链接)

3、列表项标志位置设置

列表项标记位置语法：
list-style-position：inside | outside 列表项标记在list内的显示位置，基本属性：

  • 1.inside(标记在文本内，且环绕文本根据标记对齐）
  • 2.outside(默认值，放置在文字外面，不包含标记，第二行跟文本对齐）
4、列表属性缩写

列表样式缩写（list-style）——一般是使用在有标记的标签（li）样式上的。语法：list-style:list-style-type list-style-position list-style-image;具体例：list-style:square inside url(img/em.png); 说明：

  • 1.值之间用空格分隔
  • 2.值的顺序不固定
  • 3.list-style-image会覆盖list-style-type的设置

浮动

浮动属性介绍

1、基本概念

css float（浮动）的基础知识

  • 1.浮动会使元素向左或向右移动，只能左右，不能上下。
  • 2.浮动元素碰到包含框或另一个浮动框，浮动停止。
  • 3.浮动元素之后的元素将围绕它，之前的不受影响。
  • 4.浮动元素会脱离标准流。

浮动清除：
语法 clear : none | left | right | both
清除浮动常用的方法:

  • .在浮动元素后使用一个空元素。 例如：'<div class="clear></div> ';在.clear 里面设置 clear: both;
  • 2.给浮动元素的容器（父元素）添加 overflow( 溢出 ): hidden( 隐藏 );
  • 3.使用CSS3 的 :after 伪元素 （主流方法）
    /zoom: 1; / 触发 hasLayout属性 兼容IE6、7 *
.clearfix:after{
    content:'.';  //内容为空
    height:0;
    display:block;
    visibility:hidden;
    clear:both;
    }
浮动应用实例
/*重置代码部分*/
*{
margin: 0;
padding: 0;
}
ul{list-style: none;}
a{text-decoration: none;}
/*当前页面样式*/
.container{
width: 1200px; /*最外侧框架，给它个固定宽度*/
margin: 0 auto; /*上下外边距为0 左右居中*/
}
.header{
width: 1200px;
background: #ccc;
/*高由内容撑起来*/
overflow: hidden; /*清除浮动带来的高度塌陷*/
zoom:1;/*使上面清除效果兼容IE*/
}
.header .logo{ /*这里的宽高就是logo的宽高*/
width: 200px;
height: 80px;
float: left;
/*logo位置太靠左，下面进行微调*/
margin: 0 40px;/*可先给个大概的值看看效果，不好再改*/
}
.header .nav{
/*高由内容撑起来*/
float: right;
overflow: hidden;/*清除浮动*/
zoom:1;
/*导航太靠右，下面进行微调*/
padding-right: 40px;
}
.header .nav li{
/*宽高由内容撑起来*/
float: left;
margin-right:20px; /*导航之间加点间距*/ 
}
.header .nav li a{
/*宽度可由内容撑起来*/
padding: 0 20px;
height: 80px;
line-height: 80px; /*垂直居中*/
display:block;/*转成块元素才能设置高度*/
font-size:16px; 
font-family:"微软雅黑";
color:#333;
}
.header .nav li a:hover{ /*鼠标经过导航的效果*/
color:#fff;
}

.main{
width: 1200px; /*和头部同宽，高度由内容撑起*/
overflow: hidden;/*清除浮动问题*/
zoom:1;
}
.main .con{
width: 1000px;
height: 500px;
background: blue;
float: left;
}
.main .sidebar{
width: 200px; /*1200-1000*/
height: 500px;
background: orange;
float: left;
}
.footer{
width: 1200px;
height: 100px;
background: red;
}
/*以下仅为演示效果*/
.main,.footer{
font-size: 22px;
color:#fff;
}
body内容：
<div class="container">
<div class="header">
<div class="logo">
<a href="#"><img src="./img/logo.png"></a>
</div>
<ul class="nav">
<li><a href="#">免费课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
<div class="main">
<div class="con">
content
</div>
<div class="sidebar">
sidebar
</div>
</div>
<div class="footer">
footer
</div>
</div>

CSS定位

position属性详情

  1. position属性-static（静态定位/常规定位/自然定位）
    语法：position:static;
    原理：使元素定位于常规/自然流中，参照物就是页面内的水平左右，垂直上下。
    特点：
  • 1.忽略top、bottom、left、right、Z-index声明，强制元素回归到正常的自然流。
  • 2.两个相邻元素设置了margin，最终外边距=两者外边距中最大的。
  • 3.具有固定宽高的元素，把水平或者垂直边距设为auto，会造成居中的效果。

2.position属性relative
相对定位的元素不会离开自然流，也就是说用top/right/bottom/left/z-index进行偏移后，这个元素原先所占的位置还留在那里，别的元素不会占掉那个位置。
而相对定位的相对是相对于元素本来在自然流中的位置所定位。
可以使浮动元素进行偏移，并控制其堆叠顺序。

3.position属性absolute
absolute绝对定位是可以将元素脱离 常规自然流的布局方式。absolute的几个特点

  • 3.1会使元素脱离常规自然流，这时候原布局不再保留脱离元素的空间，周围元素的布局也会受到影响。
  • 3.2当设置元素偏移量伟百分比的时候，该元素会以最近的设置了relative的定位祖先元素为参照进行偏移，当文档中找不到这样的元素，那么就以body伟参照。
  • 3.3联合上一节的知识，设置为relative的元素，他的子元素可以以其为参照进行布局。从课件上可以看出，如果想把元素设置在父元素的外部，那么可以设置负值将其布局到父元素的外边，这种方法可以实现广告挂接的效果，也就是局部定位。
  • 3.4lrtb(上下左右)如果设置为0，当元素没设置宽和高，元素会对齐到最近定位祖先元素的各边（填充父容器）；当设置了宽和高，而且设置了margin属性，那么元素将会针对margin方向值为auto的方向进行居中对齐。
  • 2.1.5当lrtb都设置为auto，元素会回归常规自然流。
  • 2.1.6z-index可以实现元素的堆叠。

4.position:之fixed
跟absolute区别：
绝对定位absolute，相对于网页而言，如果网页过高，可以滚动，那么绝对定位的元素也会跟着滚动
固定定位fixed，相对于用户视角而言，在可视化范围内固定，不随着网页滚动而滚动

position:fixed

5.sticky 磁贴定位（了解）
概念
说明：

  • 1.要有一个定位矩形的概念，当这个定位矩形完全捕获到磁铁元素，则磁铁元素固定住
  • 2.偏移标尺是由最近祖先元素来决定
  • 3.要注意其兼容性，因为其实后起之秀

网页布局

经典行布局1

  • 基础行布局：宽（width）和高（height）设置具体的单位长度（px）
  • 行布局自适应：设置最大的容器相对于浏览器（body）的百分比宽度
  • 行布局自适应限制最大宽：设置max-width，当浏览器视口小于设置的最大宽度（max-width），内容宽度则为设置的 百分数，若大于设置的最大宽度；内容宽度则是max-width的具体值。这时设置居中的话，就可以实现水平宽度的自适应。（如{width: 100%;max-widrh:1000px;height:1000px;margin:0 auto;}）
  • 行布局垂直水平居中
    垂直水平居中方式，距离top偏移50%，距离left偏移50%，再让上边距margin-top和左边距margin-left，分别向负方向偏移，元素高宽的一半。
    .container{
width:800px;
height:200px;
background-color:#4c77f2;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-400px;
}

经典行布局2

  • 行布局固定宽：width:~px
  • 行布局某部位自适应：width:100%
  • 行布局导航随屏幕滚动：position:fixed

经典两列布局

1.两列布局固定：
①一个大div设置宽高固定值，包含两个div
②两个div宽度合计等于大div，高度分别等于大div
③两个div分别进行左右浮动后会在一行
2.两列布局自适应：
将上述的宽度设置改为百分比即可

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,456评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,370评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,337评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,583评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,596评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,572评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,936评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,595评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,850评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,371评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,951评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2赞 342

推荐阅读更多精彩内容

  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,301评论 0赞 11
  • CSS 笔记
    CSS 指层叠样式表（Cascading Style Sheets），是一种用来为结构化文档（如 HTML 文档或...
    神齐阅读 2,075评论 0赞 14
  • 关于CSS
    学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,023评论 0赞 1
  • 网络技术与应用
    HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的，因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,828评论 0赞 0
  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,583评论 0赞 6