前端学习

CSS基础

1、css引入方式

1、外部样式表,把CSS样式代码写在独立的一个文件中扩展名:CSS文件名.CSS
引入外部文件:要放在

标签之间
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>内容

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>

';在.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.两列布局自适应:
将上述的宽度设置改为百分比即可

本作品采用《CC 协议》,转载必须注明作者和本文链接
本帖由系统于 1年前 自动加精
Luson
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!