HTML,CSS复习

HTML,CSS复习

6.锚点链接:点我们点击链接,可以快速定位到页面中的某个位置.

●在链接文本的href属性中,设置属性值为#名字的形式,如< a href= “#two”>第2集

●找到目标位置标签,里面添加一个id属性=刚才的名字,如: < h3 id=“two” >第2集介绍</ h3>

border-collapse: collapse;可以合并为一条边框

 table{
           width: 100%;
           border-collapse: collapse;

       }

form表单

在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。

2.页面中的表单元素很多,如何区别不同的表单元素?

答: name属性:当前input表单的名字,后台可以通过这个name属性找到这个表单。页面中的表单很多,name的主要作用就是用于区别不同的表单。

●name属性后面的值,是自定义的

type的属性为rdadio是单选按钮，而且name相同才能单选为checkbox是多选按钮

 <td>男<input type="radio" name="sex">
                    女<input type="radio" name="sex">
                </td>

常见的块元素有< h1>~< h6>、< p>、 < div>、 < ul>、 < o|>、 < li>等 ,其中< div>标签是最典型的块元素。

块级元素的特点:

①比较霸道,自己独占一行。

②度,宽度、外边距以及内边距都可以控制。

③宽度默认是容器(父级宽度)的100%。

④是一个容器及盒子,里面可以放行内或者块级元素。

常见的行内元素有< a>、< strong>、 < b>、 < em>、 < i>、 < del>、 < S>、< ins>、 < u>、 < span>等 ,其中< span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点:

①相邻行内元素在一行上，一行可以显示多个。

②高、宽直接设置是无效的。

③默认宽度就是它本身内容的宽度。

④行内元素只能容纳文本或其他行内元素。

在行内元素中有几个特殊的标签< img/>、 < input/>、 < td> ,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点:

①和相邻行内元素(行内块)在-行上,但是他们之间会有空白缝隙。一行可以显示多个 (行内元素特点)。

②默认宽度就是它本身内容的宽度(行内元素特点)。

③高度,行高、外边距以及内边距都可以控制(块级元素特点)。

●元素可以继承父元素的样式 ( text- , font- , line-这些元素开头的可以继承,以及color属性)

padding和border会撑大盒子，margin不会撑开盒子，如果没有设置宽或高，padding也不会撑大盒子

外边距可以让块级盒子水平居中,但是必须满足两个条件:

①盒子必须指定了宽度(width)。

②盒子左右的外边距都设置为auto。

常见的写法,以下两种都可以:

●margin: auto;

●margin: 0 auto;

注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

盒子阴影

一般为：
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .4);

浮动特性(重难点)

3.浮动元素会具有行内块元素特性。

任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性。

●如果块级盒子没有设置宽度 ,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定

●浮动的盒子中间是没有缝隙的,是紧挨着一起的，而行内块元素会有间距

浮动引起的高度塌陷问题

首先说一下高度塌陷

上图main的高度按理应该由三个子元素撑开，为300px
但是事实上是200px，因为元素b浮动了，如下图

所以需要清除浮动

清除浮动本质

●清除浮动的本质是清除浮动元素造成的影响

●如果父盒子本身有高度 ,则不需要清除浮动

●清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度, 就不会影响下面的标准流了

2… 一个元素浮动了,理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

css书写顺序

定位种类

精灵图

overflow

4.绝对定位(固定定位)会完全压住盒子

浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)(p,span标签)但是绝对定位(固定定位)会压住下面标准流所有的内容。

浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

图片、表单和文字对齐

图片、表单都属于行内块元素,默认的vertical-align是基线对齐。

此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对挤了。

单行文本移除有省略号

图片底部空白间隙

H5新增的input属性

选择器

使用：父亲 儿子:nth-child(2){}代表选中父亲里的第二个儿子

 /* 选中第三个li */
        .uls li:nth-child(3){
            background-color: pink;
        }
        /* 选中偶数的li ，一般用于表格隔行变色*/
        .ttt li:nth-child(2n){
            background-color: red;
        }

属性选择器第二个(重点)

 input[ type="text"]{
            color: aqua;
        }
        input[type="password"]{
            color: red;
        }
        /* 选取有icon开头的button */
        button[class^="icon"]{
            background-color: pink;
            width: 50px;
            height: 30px;
        }

伪元素选择器默认是行内标签，而且必须有content属性

 /* 伪元素选择器默认是行内标签 */
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box::before{
            /* 必须有这个属性 */
            content: '我';
        }
        .box::after{
            content: '小猪佩奇';
        }

transform对行内元素无效，对行内块元素或者块元素才有作用

css3盒子模型

过渡

动画

3D坐标系

transform系列

3Dtransform

x轴

y轴

去除img下方的空白（vertical-align：middle）——原理

也就是说img下方会无缘无故出现一个空隙。然后你发现，只要给img元素加上一个属性

vertical-align:middle 就解决了问题！！！

首先我们应该知道img是一个行内块元素，而行内块元素的默认对齐方式则是基线对其，下面通过我们熟悉的文字对齐来解释说明一下

像上图一样，图中文字的对其方式就是基线对齐，不过我们也会发现这样的话文字和底部会有一段距离
而图片就相当于是其中的x，他的最底部对齐的是基线，所以当line-height到达一定高度时下方的距离就会存在。

针对上面的问题有如下解决方法

1、而当你设 div的line-height:0 时也可以解决问题，或者font-size:0也是可以的
2、当然你设置图片的margin-bottom也可以解决，不过会影响你div中的布局
3、当我们设置vertical-align为top bottom middle时则使得其不再相对基线对其而是相对于顶部或中部对齐，这样就不会产生间距了，而一般布局都是居中对齐，所以用middle时较多

块元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%）。

块元素可以继承父元素的宽，但高不可以继承。

父级块元素的宽高可以不设置，被子元素撑开。

flex布局

2.1布局原理
flex是flexible Box的缩写,为"弹性布局" ,睐为状模型提供最大的灵活性,任何-个容器都可以指定为flex布局。

●当我们为父盒子设为 flex布局以后,元素的float. clear 和vertical- align属性将失效。
●伸缩布局 =弹性布局=伸缩盒布局=弹性盒布局=flex布局

总结flex布局原理:
就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

常见父项属性

以下由6个属性是对父元素设置的

●flex-direction :设置主轴的方向

●justify-content :设置主轴上的子元素排列方式

●flex-wrap :设置子元素是否换行

●align-content :设置侧轴上的子元素的排列方式(多行)

●align-items :设置侧轴上的子元素排列方式(单行)

●flex- flow :复合属性,相当于同时设置了flex-direction和flex wrap

flex布局子项常见属性

1.flex属性
flex:1实际代表的是三个属性的简写
flex-grow是用来增大盒子的，比如，当父盒子的宽度大于子盒子的宽度，父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比，默认为0，即 即使存在剩余空间，也不会放大；
flex-shrink用来设置子盒子超过父盒子的宽度后，超出部分进行缩小的取值比例， 默认为1，即 如果空间不足，该项目将缩小；
flex-basis是用来设置盒子的基准宽度，并且basis和width同时存在basis会把width干掉， 默认值为auto，即 项目原本大小；
所以flex属性的默认值为：0 1 auto （不放大会缩小）

flex：n；代表
flex-grow：n；
flex-shrink：1；
flex-basis：0%；

flex-grow:1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
      width: 100px;
    }
 
    .box div:nth-child(1) {
      flex-grow: 1;
    }
 
    .box div:nth-child(2) {
      flex-grow: 3;
    }
    .box div:nth-child(3) {
      flex-grow: 1;
    }
 
 
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

父盒子剩余空间的200

第一个盒子扩大1/5，100+40 = 140
第二个盒子扩大3/5，100+120=220
第三个盒子扩大1/5，100+40= 140

flex-shrink:1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
      width: 200px;
    }
 
    .box div:nth-child(1) {
      flex-shrink: 1;
    }
 
    .box div:nth-child(2) {
      flex-shrink: 2;
    }
 
    .box div:nth-child(3) {
      flex-shrink: 1;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

父盒子的宽度为500，子盒子的宽度为600，超出100，超出的100，如何进行比例缩放

第一个盒子：1/4 * 100 = 25 最终第一个盒子200-25=175
第二个盒子：2/4 * 100 = 50 最终第二个盒子200-50 = 150
第三个盒子：1/4 * 100 = 25 最终第一个盒子200-25=175

flex-basis:0%

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 100px;
      background-color: hotpink;
      display: flex;
    }
 
    .box div {
      width: 100px;
    }
 
    .box div:nth-child(1) {
      flex-basis: 50px;
    }
 
    .box div:nth-child(2) {
      flex-basis: 100px;
    }
 
    .box div:nth-child(3) {
      flex-basis: 50px;
    }
  </style>
</head>
<body>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>
</html>

这样width的宽度就已经被flex-basis:0%干掉了

2.order属性

flex布局不管是行内元素还是块级元素都可以用