CSS布局精要-优快云博客

CSS语法

文字处理

上下居中（inline-block）/margin vertical-align 左右居中 text-align
首行缩进 2 字符使用 text-indent 并利用单位 em 即可实现按字符数进行缩进。（段落缩进应该用 margin-left 或 padding-left）空格是 &nbsp
word-break:break-all 允许在单词内换行
H1 = 36px，H2 = 24px，H3 = 21px，H4 = 18px，H5 = 16px，H6 = 14px

浏览器的字体大小一般是12-13px。100% ，inherit其母体

font-weight一般是100-900，bold 600加粗
word-space是词与词之间的距离，letter-spacing是字与字，25px是一个空格。text-indent首行缩进。

行框

line-height：nmber/px；行高，默认3倍行距时16*3=48px；当line-height和height的高度一致时，相当于垂直居中。
font-size是字体大小。
[外链图片转存失败(img-oF9jlfI5-1564059810097)(./md2.jpeg)]

常用的类可以简写，不常用的类写全称
建议尽可能不固定内容容器的高度

颜色颜色值

十六进制：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。

#000000 black #454545深灰色 #000-#fff黑-白
#FFFFFF 白色
#0000ff 蓝色

RGB颜色 rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。
RGBA颜色 RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

选择器

属性选择器

    input
    <button title="点击登录此处">denglu</button>
    [title] {} ；
    [title="点击登录此处"] 完全匹配 ；
    [title*="点击"] 部分匹配 ；
    [title^="点击"] 从最开始匹配 ；
    [title&="点击"] 从最结束匹配 ；
    button[title] {}

伪类选择器

伪类	作用
button:active {}	按钮点击激活时样式
a:hover {}	鼠标悬停在对象时样式
a:link / visited	未访问/ 已访问链接样式
input:focus {}	输入框聚焦时样式
:first-child	将特殊的样式添加到元素的第一个子元素
:checked	处于选中状态的input/option元素的样式
:nth-of-type(n)	将特殊的样式添加到元素的第n个子元素

伪元素选择器

p:first-letter
.a:before a元素内部之前和之后添加内容，伪元素:before和:after添加的内容默认是inline元素；before和:after时必须设置其content属性

选择器权重：权重：style 属性（内联） > ID 选择器 > 类选择器（class） / 属性选择器 / 伪类选择器 > 元素选择器（div）/ 伪元素选择器 [外链图片转存失败(img-httHZvK5-1564059810098)(/选择器权重.jpeg)]
!important总是优先于其他规则
特殊性:
内联样式1000;
ID属性100;
类属性/属性选择/伪类010;
元素/伪元素001

继承

继承的属性最小，可以被全局选择器覆盖

选择器和选择器组合[外链图片转存失败(img-NGHGdBiL-1564059810099)(/md4.png)]
A >* 选择A的所有子项

类的命名

top-nav最大的一个导航栏
body 是个大容器 sidebar / main header(对主页的介绍) / title（标题）content logo intro tag-list标签列表aritcle-list
main / sub-promote cat-promote 类促销
头像
resume resume-title slider slidebar main
section container

盒子模型

[外链图片转存失败(img-Boh7yWZT-1564059810099)(./md12.png)]

盒子

margin ，border , padding , context ;属性值是顺时针上右下左 / 上下左右 ;

box <box-shadow> : 5个属性 ;
```
  box-shadow:0 0 1px 1px(扩散值) 
```

内容区

width和height是框内容显示的区域——包括框内的文本内容，以及表示嵌套子元素的其他框
也可以使用min-width、max-width、min-height、max-height来设置最低/最高限度的width和height
默认情况下，width和height只包括内容区域的宽和高，不包括border、padding、margin。使用box-sizing可以使其包含content、padding、border
```
  *{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
          box-sizing: border-box;
  }
```

内边距

padding是边框内，在inline（margin不会）情况下padding只有左右边距，上下边距不起作用line-height可以看起来。inline-block / block都可以

边框

border ：5px solid color；圆角 border-radius

外边距

margin是在边框外
外边距塌陷: 块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者。

相邻兄弟元素margin合并
父级和第一个/最后一个子元素
空块级元素的margin合并

注意

框的高度不能使用百分比长度
border不能使用百分比长度

如果内容区过大，将会溢出，此时可使用overflow

  overflow: visible;/* 默认值。内容不会被修剪，会呈现在元素框之外  */
  overflow: hidden;/* 内容会被修剪，并且其余内容不可见  */
  overflow: scroll;/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容*/
  overflow: auto;/* 由浏览器定夺，如果内容被修剪，就会显示滚动条  */

框的类型

块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框（ block box）
[外链图片转存失败(img-6pCMgMvW-1564059810101)(./md1.png)]
行内框（ inline box）与块框是相反的，它随着文档的文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。
行内块状框（inline-block box）像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。
table 像处理table布局那样处理非table元素，而不是滥用HTML的;标签来达到同样的目的。
flex 处理一些困扰CSS已久的一些传统布局问题，例如布置一系列弹性等宽容器或者垂直居中内容。

special 标签

<div>
通过设置width和height不让元素站整宽。

<pre>
标签里面是啥样显示就是啥样。

<aside>
元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框（call-out boxes）。
<section>
表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。

例如，导航菜单应该包含在<nav>元素中，但搜索结果列表和地图显示及其控件没有特定元素，可以放在<section>里
如果元素的内容作为一个独立的有意义的集合，<article>元素可能是更好的选择。
如果元素内容可以分为几个部分的话，应该使用 <article>而不是 <section>。
<transition> 一种动态变化
```
 .side-bar .nav a,
 .side-bar .tag-list a {
     transition:color 200ms;
     width : 2s;
     }
```

<img>

    相对路径是<img src="D:/.../相片.jpg"

    绝对路径是<img src="../相片.jpg" alt="证件照 " width="80" height="100">

flex
flex单值语法:

initial
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。
auto
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 “flex: 1 1 auto”.
none
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。

flex三值语法:

flex-grow：属性定义弹性盒子项（flex item）的拉伸因子，初始值为0，负值无效。
flex-shrink属性指定了 flex 元素的收缩规则，初始值为1
flex-basis： flex 元素在主轴方向上的初始大小，初始值auto。
flex: 0 0 auto;

align-items

flex-start;让两个盒子高度自动，不需要一样高
align-items: stretch;默认，列等高

hover

光标悬停在元素上是提供相关联的样式

    .side-bar  .nav a:hover, 
    .side-bar  .tag-list a:hover {
    color: #eeeeee;  
    width：20px；
    }

z-index
默认情况下，定位的元素都具有z-index为auto，实际上为0

cursor
pointer;改变鼠标的指针，当鼠标悬浮在图标上面的时候变成一个手形指针

box-sizinng

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

overflow

hidden 内容会被修剪，并且其余内容不可见
auto由浏览器定夺，如果内容被修剪，就会显示滚动条

快捷操作

C+S+V然后分屏 ; C+K 暂停v。

换行：<br>或者连个空格；缩进：半角的空格&ensp;, 全角的空格&emsp;

一个换行+tab是代码块，> 是引用 >>是内嵌。

. + 类名 + Tab / Enter快速得div标签，*2得2个div ，sopan . 类名 + Tab。暂停处复制直接粘贴。
创建子文件：css/gh/。按住contr / 鼠标中间在新标签页打开 , 快速填充是 Lorem.a*10。
选中相同的标签先选中一部分然后contr+D

电商网站的学习笔记

制作网页步骤

step 1. 页面大致布局： div+class选择器

step 2. 为每部分添加文字

step 3. 为每部分添加样式（display ：block / inline / inline-block）盒子模型。详见css布局。

当采用float布局网页时 float元素会形成文档流，非float元素要去除浮动，

1.一些准备工作

首先创建文件夹及文件，重置浏览器样式 bootcdn.com normalize

设置一个容器

 .container {
 max-width: 1080px;
 margin: 0 auto;
 <!-- display ：block -->块级元素显示
 }

浏览器指定文字大小12-15px ，背景色
全局选择器使用box-sizing可以使width包含content、padding、border

    ` * `{
    /*background: rgba(0, 0, 0, .1);*/
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    body {
    background: #f5f5f5;
    font-size: 14px;
    line-height: 1.7;
    }

一些可以被重用的操作

浮动以及去除浮动

.container::before,
.container::after
{
content: “”;
clear: both;
display: block;
}
并列布局， div指定长宽+float 每个页面布局的div下面应该有一个container把内容包起来，对于指定padding和margin在container内指定，因为float为无缝连接，最好用padding

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10 {
position: relative;
min-height: 1px; //一个最小高度
float: left;
}

.col-1 {
width: 10%;
}

.col-2 {
width: 20%;
}

.col-3 {
width: 30%;
}

.col-4 {
width: 40%;
}

.col-5 {
width: 50%;
}

.col-6 {
width: 60%;
}

.col-7 {
width: 70%;
}

.col-8 {
width: 80%;
}

面板定位

[选项卡消息框](file:///E:/code/text/text3/infor-box-start.html#“选项卡消息框项目”)

[外链图片转存失败(img-A7mc4KaP-1564059810102)(./md7.png)]

小区域包含大量信息(点击哪里弹出哪里的消息) 避免网页切换.
我们将样式化选项卡看起来是一个标准的水平导航菜单，使用绝对定位样式化面板互相坐落其顶上。通过JavaScript包，当选项卡被按下时，显示对应的面板，并且样式化选项卡本身。

html section（info-box） / 带连接的3个无序列表 3篇article。把一些不用的便签尺寸给归零。body的margin 列表的边距最好一边审查一边该

导航栏：确定好整个盒子的尺寸，li+float 和 a+inline-block+3倍line-height+width：100%；

 .info-box li {
 float: left;
 list-style-type: none;
 width: 150px;
 }

 .info-box li a {
 display: inline-block;
 text-decoration: none;
 width: 100%;
 line-height: 3;
 background-color: red;
 color: black;
 text-align: center;
 }

绝对定位面板：3个面板都位于div容器的左上角，就像3个面板互相位于顶部，重合规则：

设置面板为和容器同样的高度，给内容一些内边距，设置字体颜色（color），和背景颜色（background-color）。
绝对定位，将其父容器改为非static，死死地固定在盒子的左上角。

对带有类（ class ）为（ active-panel ）的面板，设置z-index 为 1。

  .info-box .panels {
          height: 452px;
          clear: both;
          position: relative;
  }

  .info-box .panels article {
          background: #A60000;
          color:white;
          height: 452px;
          position: absolute;
          top: 0px;
          left: 0px;
          padding: 10px;
  }

  .info-box .panels .active-panel {
          z-index: 1;
  }

加上js。

当把消息框固定在左侧，右侧margin-left使他移动到右边，为消息盒子在左边腾出位置，以便于各个部分不重叠。

    section.info-box {
    width:450px;
    height: 500px;
    position: fixed;
    top: 0;
    }
    .fake-content {
    background: #A60000;
    height:2000px; 
    margin-left: 470px;
    color: white;
    padding: 10px;
    }

滑动的隐藏面板

checkbox hack 技术
<label> 标签有用的副作用使你能通过点击checkbox的label标签来选择这个checkbox，就好像点击了这个checkbox自己一样。我们将通过其他两个元素控制 <aside>元素。
```
  <label for="toggle">❔</label>
  <input type="checkbox" id="toggle">
  <aside>

  ...

  </aside>
```

<laber> 给定标签的位置，注意选择部分不能有空格。

    label[for=toggle] {
    position: absolute;
    top: 4px;
    right:5px;
    z-index: 1;
    cursor: pointer;
    }

将input隐藏

    input[type="checkbox"] {
    position: absolute;
    top:-100px;
    }

面板

    aside {
    width: 340px;
    height: 98%;
    padding: 10px 1%;
    position: fixed;
    top: 0;
    right: -370px;
    transition: 0.6s all;
    }

相当巧妙地2避免用JS来创建一个切换按钮效果。
点击<label> 标签也会选择相对应的checkbox！伪元素，选择器临近选择器，选择后的状态，再次点击取消选中checkbox。
```
  input[type=checkbox]:checked + aside {
  right: 0px;
  }

 top:-100px;
  }
```

面板

    aside {
    width: 340px;
    height: 98%;
    padding: 10px 1%;
    position: fixed;
    top: 0;
    right: -370px;
    transition: 0.6s all;
    }

相当巧妙地2避免用JS来创建一个切换按钮效果。
点击<label> 标签也会选择相对应的checkbox！伪元素，选择器临近选择器，选择后的状态，再次点击取消选中checkbox。
```
  input[type=checkbox]:checked + aside {
  right: 0px;
  }
```