沐汐前端小城我爱编程

CSS基础

2017-12-21  本文已影响0人  崔敏嫣

CSS 是什么

css(Cascading Style Sheets)，层叠样式表，
选择器{属性:值；属性：值}
h1{color:red;size:14px;}
/*这是注释*/
使用css的作用，是给网页穿一身华丽的衣服，写好html之后，不是很好看，加上css后，可以让元素呈现想要的样样子

如何在页面引用CSS

1.内联样式
<h1 style="color:red;font-size:20px;"></h1>
2.内部样式

<style type="text/css">
h1:{
color:red;
font-size:20px;
}
</style>

3.外部样式(一般是放在head里)
<link rel="stylesheet" type="text/css" href="index.css">

<style>
@import url("hello.css");
@import "world.css";
</style>

@是放在样式文件里

浏览器的默认样式

认识开发者工具

文件路径

相对路径，相对于当前的一个路径 ./代表当前文件夹，../代表上级路径

css/a.css
./css/a.css
b.css
../imgs/a.png

绝对路径，在本地时，通过完整路径寻找本地文件的绝对地址
/Users/hunger/project/css/a.css
网站路径

/static/css/a.css
css/a.css
http://cdn.jirengu.com/kejian1/8-1.png

用jsbin时，预览线上图片，，需要把本地图片上传一个地址，生成一个网址，然后就可以了

chorme调试

鼠标右键，审查元素，测试边界条件，
stye调试css
sources/console调试js
console.log()只在控制台显示，不在页面显示
断点breakdown
Emulation模拟手机网速/屏幕/触摸

css学习常识

1.css没有为什么，你只能接受现实。css是一种声明式的语言，当自己的知识与浏览器产生冲突时，要相信浏览器，更改自我认识的认识。
2.css有些属性是相互影响的，如行高和字体大小，是相互影响的。
3.css有些属性是很独立的，跟其他属性没有一点关系。

主要是观察，从表象反推理论。如transform可以结合调试，以知道是干什么的

css的精髓是知道元素的边界在哪里，以及宽高

body的宽度和高度不会自动适应屏幕大小
border大法，*{border:1px solid red}
两个span在一起，只要里面有内容（包括空格），都会有间隙，大概是一个空格的宽度，但是两个div之间不会有空格。
css包括文字，结构，
东西较分撒，从小到大学，从做小按钮，小东西做起，所有的页面都是由小东西组合成的，从局部到整体
按照一个成熟的框架，一次做一个

书写规范

如何切图

把一张psd文件切成若干小图片，在设计网页时可用到
切图之前，要思考要让文件最小化，让图片最清晰
切图的具体步骤
1.用ps打开文件
2.需要把不相关的内容的图层隐藏，一般会选择把背景变为透明
3.在左边工具栏选择切片工具，选中该图片
4.选择，文件，存储为web所用格式的文件，一般存储为PNG-24,透明的文件，
5.保存，选择选中的切片
6.如果图片过大，先查看图片大小，过大再可以无准压缩，Y
一般建议用tinypng.com可以压缩png和jpeg格式图片，，图片可以变小70%，压缩完一般是1k。2k

压缩注意事项：

切图思考，背景图片很大的时候，不要一次性把整个图片考下来，如图片是由很多小格子组成的，只切一个格子，去压缩下，再复制，排列的时候去重复即可
页面清晰度高，而且不占内存

块级元素和行内元素的区别：

css的属性

使用边框做三角形

height:20px;
width:20px;
border-top:solid 20px red;
border-left:solid 20px green;
可以做上三角。下三角、梯形，保留某一个或一个边框，其他的设置为transparent
做三角形、斜形
边框也可做圆角,圆形（只需要让border-radius>=宽度的一半即可）

width:100px;
height:100px;
border:1px solod black;
border-radius:50px

边距

用于描述当前元素的属性--盒模型
margin border padding
padding代表内边距，有四个方向的值可以合写，值可以是数值，也可以是百分比（相对于父容器，不是自身）
margin代表外边距，有四个方向的值，可以合并，值可以是数值也可以是百分比（相对于父容器，不是自身），还可以是负值，需要注意外边距合并问题（当两个元素都有margin时，二者会合并）对于行内元素来说，上下的margin是无效的，只有左右margin才生效，上下padding也是无效的，但是会出现一个奇怪的现象，上下padding在视觉上能看到，但实际上只起到撑开元素的作用，对于元素真正的占据的空间是不变的，本身高度没有发生变化，撑开的可以被其他元素占据
块级元素的居中：margin:0 auto一般是块级元素设置一个宽度，如果不设置，块级元素默认撑满，就无所谓居不居中了，但是设置width再设置自动居中即可
*{marigin:0;padding:0}去除默认的边距
这样做的好处：
不同的浏览器，会有不同的默认样式，去除之后，可以你想要什么样的样式就设置什么样，会直达目的。

display

块级：block list-item table
行内：inline inline-table inline-block
默认是inline
可以应用到所有元素上，是不继承的

font

文本

行内元素居中

可将行内元素display:inline-block可以用margin:0 auto
单行文本溢出加
如果内容过多，以。。。显示

white-spacce:nowrap;
overflow:hidden;
text-overflow:ellipsis;

颜色

单词: red, blue, pink, yellow, white, black
十六进制: #000000（黑色）, #fff（白色）, #eee（淡灰色）, #ccc, #666, #333, #f00, #0f0, #00f一般网站都是用十六进制。
rgb: rgb(255, 255, 255), rgb(0, 255, 0)
rgba: rgba(0,0,0,0.5)

单位：

a链接

若想更改a链接字体的颜色，可直接对a进行设置，不能对其父元素进行设置

a{
color:red;
text-decoration:none;
}

列表去掉点,两个都可以

ul{list-style:none;}
li{list-style:none;}

隐藏或透明

opacity:0 透明度为0，本身还在，占用位置
visibility:hidden和opacity：0类似
display:none消失不占位置
background-color:rgba(0,0,0,0.2)只是背景透明

css选择器

id id选择器，匹配特定id的元素

.class 类选择器，匹配class包含(不是等于)特定类的元素
element 标签选择器

伪元素选择器用的较多是before和after

  <style>
    #test {color: #666;}
    p {color: #333;}
  </style>

<p id="text">Text</p>
这种场景下，p元素文本颜色应该是哪个呢？

css优先级，从高到低依次为

css常见样式

背景

background 简写属性，作用是将背景属性设置在一个声明中
background-attachment 背景图像是否固定或者随着页面的其余部分滚动，默认是会滚动，但是可设置fix
background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-repeat 设置背景图像是否及如何重复
background-attachment:fixed
background-position 设置背景图像的起始位置
可以缩写成一句：
background:#f00 url(background.gif) no-repeat fixed 0 0;
background-size 设置背景的大小(兼容性)
窗口指的盒子的宽高，background-size:50% 100% 200px contain(有时图片和窗口比例不一样，让图片刚好能放在窗口里面，图片进行等比缩放)
cover图片的高度刚好充满窗口，但是宽度有可能显示不完全，会隐藏，当宽度变大时，展示出来的内容会变多

CSS Sprite

将不同的图片/图标合并放在一张图上。
使用CSS Sprite可以减少网络请求，提高网页加载性能。

inline-block

既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高，内外边距)
缝隙问题：不会让外边距产生合并

line-height，行高，单行文本的行高，是可继承的属性

line-height: 2
line-height: 200%
height = line-heihgt 来垂直居中单行文本

其中line-height:2是本身单行文本高度的2倍，line-height:200%是父元素的两倍，如果用%浏览器会立刻计算大小，类似于是固定的，line-height:2是页面上的每个元素都继承自2。如果想让页面上每个元素都有几倍的行高，应该使用line-height:2

让元素居中的两种方法：让元素display:inline-block.让父元素text-align:center就可以
div包括这些元素，用浮动让元素水平排列，给其设置宽度再用margin:0 auto
在使用inline-block后，会发现如果两个并排的元素行高不一样，将不在一个水平线上，行内元素对齐，默认是以元素基线对齐，如果想顶部对齐，在元素上添加vertical-align:topvertical是和行内元素和表格绑定在一起的

盒模型

盒模型一般是由content padding border margin 组成，在标准盒模型中设置的width一般是指content的宽度
IE盒模型下的width指的是以边框为计算标准，是border,padding,content
ie678怪异模式（不添加doctype，使用ie盒模型，宽度=边框+padding+内容宽度）
使用css3新样式box-sizing

box-sizing:content-box:w3c标准盒模型，默认情况下是标准 的盒模型
box-sizing:border-sizing：IE盒模型

icon

实现方式，大概介绍5种
1.image
2.CSS Sprites
3.Icon Font
4.CSS Icon
5.SVG

需求

一个页面上有多少个小图标

1.使用image实现 兼容性好

在需要使用小图标的时候，可以把小图标当成图片，使用img标签<img src="">
注意事项：

2.CSS Sprites css精灵图 兼容性好

自己做雪碧图？
把两个图片做成一个图片
使用background-position:-40px 0px,一个是x偏移值，一个是y的偏移值
优点:解决了请求过多的问题
缺点：
无法缩放，想要多大的图片，先缩下，再合成
不好修改，如果中间想增加一个图标，所有步骤都要重新来。

3.icon font

字体什么样是由设计师设计的，采取一些简单的代码代替有些内容，比如1代表xx，2代表00这类

.icon-search:before{content:"&#xe630";}
<span class="" ></span>

按照上述写法，&#不会发生变化，但是x会变成打印机，转义出了问题，以&开头的转义是只适用于html，不适用css
更改为

.icon-search:before{content:"\e630";}
<span class="" ></span>

4.css icon 用css来画 ie以前的版本不支持

比较无聊，费时的做法

5.svg ie9以后支持，用移动端首先这种方法

svg可以直接作为图片url的链接方式，但是一样会造成请求较多
另外一种就是做成svg“精灵图”，类似于用锚点电定位
步骤
1>声明
使用svg标签<svg xmlns=""><symbol id="cart"><path d=""></symbol></svg>
2>使用
<svg> <use xlink:href="#cart"></use></svg>
好处：颜色大小随便改

css浮动基本概念

浮动模型也是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样.
行框 浮动会让元素脱离普通流, 如果浮动的元素后面有一个文档流中元素,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框
浮动后虽然绿色div布局不受浮动影响，正常布局，但是文字部分却被挤到了红色浮动div外边，要想阻止行框围绕在浮动元素外边，可以使用clear属性，属性的left rigght both none 表示框的哪些边不挨着浮动框。
浮动加clear，对谁清除浮动就把clear放在哪，想让他clear只对自己生效，比如一个方块2在使用了浮动后，想让他单独一行，不允许其左右有元素，那加上clear:both即可
浮动元素相当于是让文字围绕浮动元素来走，有浮动元素的地方没有文字，浮动元素没有涉及的地方就有文字
一个块级元素里面如果包含浮动元素，那么不设置高度的情况下，高度为0，块级元素是感受不到浮动元素的。后面的div也会受影响，会认为上面的元素没有内容，直接按照文档流往上浮，但是里面的文字同样会感受到浮动元素的存在。
如果包含块太窄无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间，如果浮动元素的高度不同，那么向下移动的时候可能被卡住。
清理浮动，解决浮动父容器高度塌陷问题

为什么要清理浮动？

1、用完浮动，文字会围绕浮动元素周围
2、浮动元素父容器高度塌陷
3、浮动元素父容器后面的块级元素位置往上浮
想让浮动元素的父容器正常包裹浮动元素，有高度，(撑开父容器)可在浮动元素后，父容器内添加一个<div style="clear:both;">，但是增加了一个没有特别语义的元素
另外一种清除浮动的方式，是形成BFC（Blck Format Content）
块级格式上下文形成方式：

position:absolute;
position:fixed;
float:left right 
display:inline-block;
display:table-cell;
overflow:auto  hidden  scroll;(overflow不为visible的)；

以上元素属于块容器但不是简单的display:block;
块级元素之间是上下排列的且元素之间的外边距会产生合并。
但是使用上述内容时：
1>都会建立新的块级格式上下文（也会至上往下排列）
2>不会边距合并
3>浮动
清理浮动两种方式

BFC特性
其中第二个BFC不会重叠浮动元素，指的是使用块级格式上下文时，文字不再围绕浮动元素，而是作为整体在一块
第三个BFC可以包含浮动是指可以用于清除浮动
在正常文档流从上住下排列的情况中，会有一种情况，如果当两个是相邻元素，外边距会进行合并，如果两个是父子元素，则子元素设置的margin会直接影响父元素，如：
<div class="ct" > <h1>h1</h1>
对h1直接设置margin，会直接让ct的外边距发生改变。解决办法是对ct加个边框border:1px solid red之类或者加个padding,或者把ct生成块级格式上下文，如上。但是每一种方法都有自己的副作用

通用的浮动清理方法

.clearfix{
      *zoom:1;  /*IE6/7版本中清除浮动副作用最小的办法*/
  }
  .clearfix:after{  /*IE8以上可用伪元素*/
      content:"";
      display:block;
      clear:left;
  }


  /*方法2*/
  .clearfix{
    *zoom:1;
  }
  .clearfix:after{
    content:"";
      display:table;
      clear:both;
  }

利用 clear属性，清除浮动
使父容器形成

定位

inherit 规定应该从父元素继承 position 属性的值 一般不怎么用
static 默认值,没有定位，元素出现在正常的流中，类似于普通元素设置top bottom left right没有用（忽略 top, bottom, left, right 或者 z-index 声明） 没有加position和position:static一样
relative 生成相对定位的元素，相对于元素本身正常位置进行定位,因此，left:20px 会向元素的 left 位置添加20px
absolute 生成绝对定位的元素，脱离文档流，相对于static定位以外的第一个祖先元素（offset parent）进行定位,元素的位置通过 left, top, right 以及 bottom 属性进行规定
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定
sticky CSS3新属性，表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置
定位机制
CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)

普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式
浮动元素的定位是对应position属性的relative值，如果对一个元素进行相对定位，它将出现在他所在的位置上，然后可以通过设置垂直或水平位置，让这个元素相对于它自己移动，在使用相对定位时，无论元素是否移动，元素在文档流中占据原来空间，只是表现出来的位置会改变。

作用：

比如一个萝卜一个坑，萝卜移走了，但是坑还在，其他坑挨着坑排序。在页面添加一个icon时但是不知道什么原因总是对不起，可选择使用relative

绝对定位包括 absolute和 fixed

Position 的几个值
static

<div style="border: solid 1px #0e0; width:200px; position: static;">
<div style="height: 100px; width: 100px; background-color: Red;">
</div>
<div style="height: 100px; width: 100px; background-color: Green;">
</div>
<div style="height: 100px; width: 100px; background-color: Red;">
</div>
</div>

定位机制

CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute,fixed)

普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中position: static与position:relative属于普通流的定位方式
浮动定位定位机制后续讲解
绝对定位包括 absolute和 fixed

absolute 和 fixed

绝对定位垂直水平居中

position:absolute;
left:50%;
margin-left:-元素宽度的一半;
top:50%;
margin-top:-元素高度的一半;
width:300px;
height:300px;

此种方法适用于，元素自身宽高固定，且绝对居中（弹出框常用）

负margin和relative的区别：

1>relative使用时位置还在，只是元素偏移，萝卜和坑的问题，萝卜走了，坑还在，不会对后面的元素位置产生影响
2>负margin是文档流的位置发生偏移，萝卜走了，坑也走了，对后面的元素位置也发生变动

CSS居中

居中的分类

水平居中

1>让单行文字在块级元素中居中
text-align:center实现水平居 中
2> 按钮内容的居中
行内元素的padding上下是无效的不占用空间的，但是背景色是占用的，所以一般使用display:inline-block对外层元素设置text-align:center，可实现水平居中
3>图片的居中 同上
4>块级元素的居中
块级元素本来就是占满整个横向空间的，一般设置居中的元素都是有宽度的
让块级元素本身居中，只需设置margin:0 auto
让块级元素中的行内元素居中，只需设置text-align:center

一栏布局

1>非通栏固定宽度居中

main{
      border:1px solid red;
      max-width:800px;
      min-height:1000px;
      margin-left:auto;
      margin-right:auto;
    }

2>非通栏不固定宽度居中

  main{
      border:1px solid red;
      min-height:1000px;
      margin-left:10px;
      margin-right:10px;
    }
一栏通栏布局，内容居中
3>一栏布局，头部通栏，加logo
[http://js.jirengu.com/yuhit/5/edit?html,output] 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      margin:0;
    }
    #topbar{
      border:1px solid blue;
   
    }
    #topbar>.inner{
      max-width:800px;
      margin-left:auto;
      margin-right:auto;
      line-height:40px;
    }
    .clearfix::after{
      content:"";
      clear:both;
      display:block;
    }
 #topbar .logo{
     width:40px;
     height:40px;
     background:#ddd;
     float:left;
   }
    #topbar .buttons{
      float:right;
    }
    #topbar .slogan{
      border:1px solid red;
      margin-left:40px;
      margin-right:100px;
    }
    main{
      border:1px solid red;
      min-height:1000px;
      max-width:800px;
      margin-left:auto;
      margin-right:auto;
    }
  </style>
</head>
<body>
  <div id="topbar">
    <div class="inner clearfix">
      <div class="logo"></div>
      <div class="buttons">
        <a href="#">登陆</a>
        <a href="#">注册</a>
      </div>
      <div class="slogan">haha</div>
    </div>
  </div>
  <main></main>
</body>
</html>
image.png

如上所做，虽然实现了效果，但是相当复杂，我们可对元素用flex布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      margin:0;
    }
    #topbar{
      border:1px solid blue;
   
    }
    #topbar>.inner{
      max-width:800px;
      border:1px solid green;
      margin-left:auto;
      margin-right:auto;
      display:flex;
      align-items:center;
    } 
 #topbar .logo{
     width:40px;
     height:40px;
     background:#ddd；
   }
    #topbar .buttons{   
    }
    #topbar .slogan{
     flex-grow:1;
    }
    main{
      border:1px solid red;
      min-height:1000px;
      max-width:800px;
      margin-left:auto;
      margin-right:auto;
    }
  </style>
</head>
<body>
  <div id="topbar">
    <div class="inner">
      <div class="logo"></div>
      
      <div class="slogan">haha</div>
      <div class="buttons">
        <a href="#">登陆</a>
        <a href="#">注册</a>
      </div>
    </div>
  </div>
  <main></main>
</body>
</html>

简单方便快速实现内容
4>行内元素一栏布局


image.png

同一行元素有多个时，内部缝隙去除方法
1.去掉代码之间 的缝隙，让代码紧密挨着
2.用display:innlne-blcok;父元素font-size:0;子元素再设置font-size:16px;
3.最好是让元素浮动，再在外面嵌套一个层，清除浮动，让其变为inline元素，再居中。inline-block一般适用于只有一个元素，没有哥哥元素、也没有弟弟元素的情况

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      margin:0;
    }
    .parent{
      border:1px solid red;
      margin:0 auto;
      text-align:center;
      padding:3px;
     
    }
    .clearfix::after{
      content:"";
      display:block;
      clear:both; 
    }
    .child{
      display:inline-block;
    }
    span{
      border:1px solid green;
      float:left; 
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child clearfix">
    <span>确定</span>
     <span>取消</span>
      </div>
  </div>
</body>
</html>

4.用flex布局，justify-content:center即可


image.png

5> 两栏布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
 body{
  margin:0;
  }
   aside{
      width:200px;
  background:#ccc;
  min-height:200px;
     float:left;
  }
    main{
      background:#eee;
      min-height:600px;
      margin-left:210px;
    }
   .wrapper{
     max-width:800px;
     margin:0 auto;
     border:1px solid red;
   }
  </style>
</head>
<body>
  <div class="wrapper">
 <aside></aside>
  <main> </main>
    </div>
</body>
</html>
实现如下 image.png

用flex布局实现上图

<style>
    body{
      margin:0;
    }
    .wrapper{
      max-width:800px;
      margin:0 auto;
      border:1px solid red;
      display:flex;
    }
    aside{
      min-height:30px;
      border:1px solid;
      width:200px;
    }
    main{
      min-height:50px;
      flex-grow:1;
      border:1px solid;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <aside></aside>
  <main></main>
</div>
</body>

制作一个类似于用户评论的卡片，即左侧只是很小的头像，右侧是内容而且确定高度大于头像高度，可用position（否则，会超出范围）,子元素使用position:absolute时，父元素要使用position:relative;

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    body{
      margin:0;
    }
.wrapper{
  border:1px solid red;
  width:300px;
  height:300px;
  position:relative;
  margin:0 auto;
}
 aside{
   width:60px;
   height:60px;
   background:#ccc;
   border-radius:30px;
   position:absolute;
   left:0;
   top:0;
 }
 .text{
   border:1px solid green;
   min-height:200px;
   margin-left:60px;
   
 }
  </style>
</head>
<body>
<div class="wrapper">
  <aside></aside>
  <div class="text">我是一只小小小娘，我飞也飞不高，</div>
</div>

6>三栏布局

 body{
      margin:0;
    }
    aside{
      width:120px;
      background:#ddd;
      min-height:100px;
      border:1px solid;
      float:left;
    }
    .clearfix{
      content:"";
      display:block;
      clear:both;
    }
    #ad{
      width:150px;
      background:#ddd;
      min-height:200px;
      border:1px solid;
      float:right;
    }
    main{
      background:#666;
      border:1px solid;
      min-height:300px;
      margin-left:130px;
      margin-right:160px;
    }
  </style>
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper clearfix">
  <aside></aside>
  <div id="ad"></div>
  <main> </main>
</div>

展示如下


image.png

用flex布局实现如下

 body{
      margin:0;
    }
    .wrapper{
      display:flex;
      border:1px solid red;
    }
    aside{
      width:120px;
      background:#ddd;
      min-height:100px;
      border:1px solid;
      order:1;
    }

    #ad{
      width:150px;
      background:#ddd;
      min-height:200px;
      border:1px solid;
      order:3;
    }
    main{
      background:#666;
      border:1px solid;
      min-height:300px;
      flex-grow:1;
      order:2;
    }
  </style>
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <main> </main>
  <aside></aside>
  <div id="ad"></div>
</div>

垂直居中

1>很多其实看着是垂直居中的，只需要设置上下padding一致就可以，内容随便增加，上下padding不影响，一般高度都不用固定
2>按钮 icon 或者明确一般只有一行文字，可以进行设置line-height:heght的高度,此时需要设置height
3>一般网站的宽度都是固定的，需要设置一个layout层，设置layout{width:1000px; margin:0 auto;}
4>绝对居中，完全水平垂直居中
块级元素内，宽高是固定的，多行文本 行内元素水平垂直居中：text-align,margin可以设置为，但是这个不是绝对的垂直水平居中，
块级元素的宽高不是固定的，比如每个页面的展现都是浏览器的大小，但是浏览器大小是不固定的，行内元素实现水平垂直居中：
5>真正意义上让一个高度不固定的元素的垂直水平居中

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
 body{
  margin:0;
  }
    main{
      background:#eee;
      width:400px;
      display:inline-block;
      vertical-align:middle;
    }
   .wrapper{
     width:800px;
     height:600px;
     margin:0 auto;
     border:1px solid red;
     text-align:center;
   }
    .wrapper::before,.wrapper::after{
      content:"";
      display:inline-block;
      height:100%;
      vertical-align:middle;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <main>
真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中真正意义上的垂直水平居中
    </main>
    </div>
</body>
</html>

让一个块级元素变为全屏的方法：
1>body，html{height:100%},对块级元素进行设置height:100%,依次对其父元素进行设置，直到设置到html，可不但设置首页全屏，往下翻都是全屏的，整屏全屏或者不止一个页面要全屏
2>设置position:absolute或fixed ;对top riht bottom left均设置为0
即top:0;left:0;bottom:0; right:0 但是全屏之后只有一个，如果多的话会覆盖，这种情况可适用于弹出框。再让里面的元素垂直水平居中，可设置left/top：50%，再加上负margin
如果块级元素内包含的元素宽高不固定，可设置子元素left,top:50%,transform:translate(-50%,-50%)

什么是布局

将一个页面切成豆腐块样的就是布局

div+css布局？

很多年以前，人们习惯用table座布局，但是现在不怎么用了，推崇的是div做替换，实际上div 是无语义的标签，

常见的布局 PC端

固定宽度布局。比如不管浏览器有多宽，所有的内容都集中在中间一块，固定的宽度内，左右有边界线。一般90%的网站都是这种布局。

优点：简单，宽度是写死的，不管浏览器如何变，页面不会变乱。

缺点：如果页面设置的宽度大于浏览器宽度，会出现滚动条

弹性布局。页面内容不是固定宽度，和浏览器页面宽度有关，是通过%进行设置的。

优点：设计合理的话，页面会比较好看

缺点：当浏览器宽度发生变化时，页面内容会随着变化，会出现一个内容过分大、过分小的情况，不美观，设计相对复杂，要考虑到屏幕特别大、特别小的情况

响应式布局。在什么样的宽度下，页面是什么样，适配不同的终端，不同屏幕的大小

如何实现下图

单列布局.png

实现方法：定宽、水平居中

<div class="layout">
 <div id="header">头部</diiv>
<div id="content">内容</diiv>
<div id="footer">尾部</diiv>
</div>

如上设置时，呈现的是所有内容都在固定宽度范围内，包括背景色及内容。

宽度和最大宽度的区别

width是固定的，在使用过程中，不管浏览器如何变化。宽度不变，如果显示不完，会出现滚动条
max-width在使用过程中，如果浏览器的宽度小于max-width，内容为实际展示内容，不会有滚动条

 <div id="header" class="layout">头部</diiv>
<div id="content" class="layout">内容</diiv>
<div id="footer" class="layout">尾部</diiv>

内容同上，只是节省了标签，同样能实现可批量修改样式
带通栏效果的，头部和尾部带通栏背景，但是内容还是居中，集合在中间一块

 <div id="header" >
<div class="layout">头部</diiv>
</div>
 <div id="content" >
<div class="layout">内容</diiv>
</div>
<div id="footer" >
<div class="layout">尾部</diiv>
</div>

当浏览器大于宽度，内容还是集中到中间，但是头部、尾部的背景可以是全屏，里面的内容是集中到中间的，但是如果浏览器的宽度小于内容的宽度，显示不完，会出现滚动条，最右边会有一部分首部和尾部显示不完全的情况。解决办法是对body:min-width:960px;

内部元素水平居中

.parent{text-align:center;} .child{display:inline-block;} ``.child{display:inline;zoom:1;}
如果内部元素不唯一且高度不一样，需要使用verticla-align:top
多块居中一般不建议用绝对定位

双列布局

一列固定宽度，一列自适应宽度
浮动元素+普通元素的margin
浮动元素之后，元素容易移位，但是形成BFC即可，但是比较麻烦，而且都有副作用，所以可以用margin-left之类
浏览器渲染，从上到下，读到元素之后，再读其样式，再接着读以下元素
元素用display:inline-block之间的缝隙，可对父容器设置font-sizes:0,再对元素本身设置font-size:具体大小

transform:scale( ) translateY() translateX()不会对其后面的元素造成影响，只占据原来的位置，移动后的位置，其他元素感知不到，跟flaot一样

FLEX布局

flex布局之前的布局方式

flex-direction的属性

flex-wrap换行的属性

flex-flow是flex-direction flex-wrap 的简写

justify-content主轴方向的对齐方式

主轴方向是指flex-direction的属性值，当flex-direction:row时主轴方向是左右方向，当flex-direction:column时，主轴方向是竖直方向
justify-content的属性：

align-items侧轴对齐方式，在高度不写死的情况下，才有效

align-content多行多列内容

flex item的属性

image.png
上一篇下一篇

猜你喜欢

热点阅读