HTML && CSS_stylerel-CSDN博客

html基本结构


<!DOCTYPE html>
<html lang="en">//lang是语言,en是英语
<head>
    <meta charset="UTF-8">//UTF—8,是国际通用的,如果不写可视区域会乱码
    <meta name="keywords" content="关键词的内容">//有利于搜索引擎的搜索
    <meta name="description" content="描述的内容">//有利于搜索引擎的搜索
    <title>网页的标题</title>
</head>
<body>
body里面是可视区域,写的内容都会在浏览器中出现
</body>
</html>

css布局：

1.float浮动布局：

优点：float被设计出来的初衷是用于——文字环绕效果。一个图片一段文字，图片float:left之后，文字会环绕图片。浮动的元素互相贴靠，不会有空白间隙

缺点：被设置了float的元素会脱离文档流,造成父元素高度坍塌。

特性：普通的div块级如果没有设置宽度，它会撑满整个屏幕,div设置了float之后，自动收缩为内容的宽度，而不是撑满整个父容器。如果是span行内元素（不可以设置宽高）设置了float之后它有着行内块级元素的一些性质例如可以设置宽高。

清除浮动：

1.为父元素添加overflow:hidden或者overflow:auto　　这样父元素就有高度了，父元素的高度便不会被破坏；或者设置高度

2.浮动父元素

3.通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。

4.给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
    content: '';
    /* 设置添加子元素为块级元素 */
    display: block;
    /* 设置添加的子元素的高度0 */
    height: 0;
    /* 设置添加子元素看不见 */
    visibility: hidden;
    /* 设置clear：both */
    clear: both;
}

总结：

一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，

块级格式上下文

BFC是页面上的一个隔离的独立容器，这个区域内的子元素无论使用何种布局、何种样式都不会影响外部的元素
BFC的布局规则如下：

a.内部的盒子会在垂直方向，一个一个地放置
b.BFC是页面上的一个隔离的独立容器
c.属于同一个BFC的两个相邻Box的上下margin会发生重叠

规则为：

当两个块级元素的外边距都为正数时，取较大者

当两个块级元素的外边距都为负数时，取较大者

当一正一负时，为两者的和

用途：

1.兄弟关系的重叠：如果我们想阻止这种情况发生，很容易想到只要让两者位于不同的BFC当中就可以做到了，给一个元素加个父元素，然后加个overflow：hidden）)

2.祖先关系折叠 <div style="margin:30px；overflow:hidden;"> <div style="width:100px;height:100px;background:red;margin:30px"></div> </div>

3.计算BFC的高度时，浮动元素也要参与计算(清除浮动，既为给父元素增加oveflow:hidden或者overflow:auto。使用overflow: hidden;触发BFC属性，就可以承载具有float属性的元素了）

4.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
5.BFC的区域不会与float重叠（浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发BFC后可以阻止这种情况的发生。经常在布局中使用。）

如何触发BFC

浮动元素：float除none以外的值
绝对定位元素：position(absolute、fixed)
display为以下其中之一的值inline-block、flex、inline-flex、table-cell、table-caption
overflow除了visible以外的值(hidden、auto、scroll)

img图片为啥底部会出现空白

img 属于 inline 元素，行内元素的vertical-align的对齐方式默认为baseline。

总结的解决方案

　　1、将图片转换为块级对象可去掉下边空白

　　即设置img为：display:block;

　　2、设置图片的垂直对齐方式

　　即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以去掉下边空白。

flex布局

.box{
  display: flex;
}

.box{
  display: inline-flex;
}

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

容器的属性

以下6个属性设置在容器上。

flex-direction : row ,row-reverse, cloumn cloumn-reverse
flex-wrap: wrap,nowrap, wrap-reverse
flex-flow:flex-direction和flex-wrap的简写形式
justify-content：flex-start,flex-end,center,space-between,space-around
align-items:flex-start ,flex-end,center,baseline(项目的第一行文字的基线对齐),stretch(如果项目未设置高度或设为auto，将占满整个容器的高度)
align-content:flex-end,flex-start,center,space-between,space-around,stretch(轴线占满整个交叉轴)

以下6个属性设置在项目上。

order:属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 -1,-2

align-self:属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
auto | flex-start | flex-end | center | baseline | stretch;
flex-grow:属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

(如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。)

flex-shrink:属性定义了项目的缩小比例，默认为1，即如果空间不足(在默认宽度之和大于容器的时候才会发生收缩)，该项目将缩小。(如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。)

flex-basis：flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

flex:1

flex为一个非负数字n：该数字为flex-grow的值，

   flex：n；= flex-grow：n；

   flex-shrink：1；

   flex-basis：0%；[不会按项目本身来计算, 所以它不关心内容, 只是把空间等比收缩和放大]

flex为两个非负数字n1，n2：分别为flex-grow和flex-shrink的值，

   flex：n1 n2; = flex-grow：n1；

   flex-shrink：n2；

   flex-basis：0%；

flex为一个长度或百分比L：视为flex-basis的值，

   flex: L; = flex-grow：1；

   flex-shrink：1；

   flex-basis：L；

flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%

例子

网格布局

最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。

HTML代码如下。


<div class="Grid">
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell">...</div>
</div>

CSS代码如下。


.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

2.2 百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

HTML代码如下。


<div class="Grid">
  <div class="Grid-cell u-1of4">...</div>
  <div class="Grid-cell">...</div>
  <div class="Grid-cell u-1of3">...</div>
</div>

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
}

.Grid-cell.u-full {
  flex: 0 0 100%;
}

.Grid-cell.u-1of2 {
  flex: 0 0 50%;
}

.Grid-cell.u-1of3 {
  flex: 0 0 33.3333%;
}

.Grid-cell.u-1of4 {
  flex: 0 0 25%;
}

圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}

如果是小屏幕，躯干的三栏自动变为垂直叠加。


@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

五、悬挂式布局

有时，主栏的左侧或右侧，需要添加一个图片栏。

HTML代码如下。


<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">...</p>
</div>

CSS代码如下。


.Media {
  display: flex;
  align-items: flex-start;
}

.Media-figure {
  margin-right: 1em;
}

.Media-body {
  flex: 1;
}

六、固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

<body class="Site">
  <header>...</header>
  <main class="Site-content">...</main>
  <footer>...</footer>
</body>

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

七，流式布局

每行的项目数固定，会自动分行。

.parent {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.child {
  box-sizing: border-box;
  background-color: white;
  flex: 0 0 25%;
  height: 50px;
  border: 1px solid red;
}

flex布局

响应式布局

隐藏页面中某个元素的方法

opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click 事件，那么点击该区域，也能触发点击事件的

visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

display：none，把元素隐藏起来，并且会改变页面布局，将对应的元素销毁，在文档布局中不再分配空间（回流+重绘）

`css透明度opacity和rgba`

1.语法格式“color:rgba(R,G,B,A);”或“background:rgba(R,G,B,A);” Alpha（不透明度）

2.opacity:0-1(0透明，1完全不透明）

最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色

总结：opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性

CSS 盒子模型

CSS 盒模型本质上是一个盒子，它包括：margin，border，paddding和content。
在标准的盒子模型中，width 指 content 部分的宽度。
在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度。

故在计算盒子的宽度时存在差异：

标准盒模型： 一个块的总宽度 = width+margin(左右)+padding(左右)+border(左右)[box-sizing:content-box]

怪异盒模型： 一个块的总宽度 = width+margin（左右）（既 width 已经包含了 padding 和 border 值）[box-sizing:border-box]

position 属性的值有哪些及其区别

固定定位 fixed：脱离文档流, 相对于浏览器窗口进行定位。通过 "left", "top", "right" 以及 "bottom" 属性进行规.

相对定位 relative：不脱离文档流,相对于自己原来的位置偏移，但在文档流中保留原位置的空间（预留空间），元素原来位置会一直保留空白占位，相邻兄弟元素会保持原来的位置，不会随元素的移动而改变

1> 不影响元素本身特性（无论块元素还是内联元素会保留其原本特性）

2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）

3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）。

绝对定位 absolute：脱离文档流，不预留空间，该元素下的兄弟元素位置上移。相对于 static 定位以外的第一个父元素进行定位（relative/absolute/fixed）。否则，相对浏览器视口绝对定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

1> 使元素完全脱离文档流（在文档流中不再占位）

2> 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性类似于float）

3> 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性类似于float）

4> 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）

粘性定位 sticky：相对定位和固定定位的混合

该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。

默认定位 Static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

z-index 仅能在定位元素上奏效[(position:absolute, position:relative, or position:fixed)

让一个元素水平垂直居中

水平居中：

对于行内元素/文本 : text-align: center;

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
.text{
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    background: skyblue;
}
</style>
<!-- html 结构 -->
<div class="text">文本垂直居中</div>

对于确定宽度的块级元素：

（1）width和margin实现。margin: 0 auto;

（2）绝对性定位，利用 calc 计算偏移量进行定位(100%-元素的宽度或者高度然后在除以2)

.calc{
  position: absolute;
  width: 200px;
  height: 200px;
  left:calc((100% - 200px)/2);
  top:calc((100% - 200px)/2);
   background: yellowgreen;
}

(3)绝对定位利用 margin 负值属性(left:50%)

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
.div {
    position:absolute;
    top:50%;
    left:50%;
    width:200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    /*margin-left: -100px 0 0 -100px;*/
    background:red;
}
</style>
<!-- html 结构 -->
<div class="div">margin: -100px;元素垂直居中</div>

(4) 绝对定位利用 margin:auto 属性

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
/* 绝对性定位 */
.div {
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
    background: skyblue;
}
</style>
<!-- html 结构 -->
<div class="div">margin: auto;元素垂直居中</div>

对于宽度未知的块级元素

（1）绝对定位+transform，top:50%,translateX(-50%)可以移动本身元素的50%。

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
.div {
    position: absolute; /* 相对定位或绝对定位均可 */ 
    width:200px; 
    height:200px; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
    background-color: pink;
}
</style>
<!-- html 结构 -->
<div class="div">利用 transform 进行垂直居中</div>

（2）flex布局使用justify-content:center

文本垂直居中

text-align: line-height

<!-- css 样式 -->
<style rel="stylesheet" type="text/css">
.text{
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    background: skyblue;
}
</style>
<!-- html 结构 -->
<div class="text">文本垂直居中</div>