【锚点 + 鼠标穿透 + 宽高自适应 + 高度塌陷 + 伪元素 + 表格 + 表单】

最新推荐文章于 2023-06-09 15:00:15 发布

yx-02

最新推荐文章于 2023-06-09 15:00:15 发布

阅读量273

点赞数

文章标签： css3 html css

本文链接：https://blog.csdn.net/YANG_helloworld/article/details/121915047

版权

锚点:

(需要个a,需要个id)
是网页制作中超级链接的一种，又叫命名锚记。
命名锚点的作用：在同一页面内的不同位置进行跳转。
制作锚标记：

给元素定义命名锚记名语法：

     <标记 id="命名锚记名"> </标记>

命名锚记连接语法：

     <a href="#命名锚记名称"></a>

例如:

         <div id="a1"> </div> 
         <a href="#a1"></a>

鼠标穿透 pointer-events

设置鼠标指针穿透,只要结果不是0,都能穿透
pointer-events:painted/none;
(一般为这两个属性值)

自适应

网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。

一、宽度自适应:
1、宽度不写
2、宽度的单位不用px，用相对单位比如%；
3、用min-width、max-width设置。用在响应式布局上

二、高度自适应:
1、高度不写，
存在问题：如果子元素浮动，父元素会高度塌陷。(高度塌陷)
2、高度的单位不用px，用相对单位比如%；
如果希望相对于窗口的话，默认情况下，height用%是不生效的，需要给body,html{height:100%;}

高度塌陷

产生条件：

所有的子元素浮动，父元素没有设置高度，最近的父元素会高度塌陷。(子元素与父元素属于包含结构)
解决方法：
1: 给父元素添加固定高度 ,但是不适合高度自适应的布局
2：给父元素添加声明overflow:hidden; 不适合定位定出去的页面布局使用,overflow想要生效必须设置高度
3：在浮动元素下方添加空div,并给该元素添加声明：div{clear:both;} 但是多了很多空标签,造成代码冗余
4:万能清除浮动法给父元素可以起个公共的名称,谁需要谁去调用
```
 父元素:after{
        content:".";
        clear:both;
        display:block;
        visibility:hidden;
             }
```

伪对象选择器 (伪元素选择器)

为了和伪类作区分, 它可以是: 也可以是:: 它俩结果一样,权重为1,
通过伪对象里属性content中添加图片,图片大小不能设置且图片有缝隙,如果想要去除,用margin负数.

:after或::after 与content属性一起使用,定义在对象后的内容(文本或者图片) .

   div::after{
          content:"您好";
               }
   div:after{
          content:url(images/pic.jpg);
       }

:before或者 ::before 定义在对象前的内容(文本或图片, 用法和:after用法一样)

div:before{
          content:"文字";
 }
 div:before{
          content:url(图片链接);
 }

:first-letter 或者 ::first-letter
定义对象内第一个字符的样式,该伪元素只能用于块元素
:first-line 或者 ::first-line
定义对象内第一行的样式,该伪元素只能用于块元素
::selection
选中之后的样式,只支持background ,color 属性,这个只能用双冒号

表格

表格相关属性

HTML中常用标签:

      宽度  width
      高度  height
      边框  border
      边框颜色 bordercolor
      背景颜色 bgcolor
      文字水平对齐 align="left/right/center "
      文字垂直对齐 valign="top/bottom/middle"
      cellspacing="单元格与单元格之间的间距" 必须给table
      cellpadding="单元格与内容之间的空隙" 必须给table

      合并单元格属性:
       colspan="所要合并单元格的列数"  合并列必须给td
       rowspan="所要合并的单元格行数"  合并行必须给td
       
    这个合并之后需要把多余的单元格删除

表格标题:

 <caption>标题内容</caption>    默认居中显示

表格列分组:

<colgroup span="几列 数字"></colgroup>
             <col span="数字"> 
   如果用rules添加组分割线的话，列分组必须用colgroup
   
   rules属性必须添加给table标签 (rules是组分割线)
   rules的属性值:
          -none      没有线,且会把间距合并
          -groups    组分割线,且会把间距合并
          -rows      行线,且会把间距合并
          -cols      列线,且会把间距合并
          -all       所有线,且会把间距合并 
    rules="groups/rows/cols/all/none"       

   col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组
  span属性显示指定相邻几列组成一组，span属性值默认为1

表格行分组:

      <thead></thead> 表头
      <tbody></tbody> 表体
      <tfoot></tfoot> 表尾

css中相关属性:

border-spacing:20px;  单元格与单元格的间距 
    (单元格间距 该属性必须给table添加 表示单元格边框之间的距离,不可取负值)
border-collapse:separate/collapse;  合并相邻单元格边框, 
     该属性必须给table添加  separate默认值 边框分开   collapse边框合并
empty-cells:show/hide;  无内容时单元格的设置 ,
     定义当单元格无内容时,是否显示该单元格的边框区域  show 显示  hide隐藏 
table-layout:auto/fixed; 是否固定单元格的宽度
     fixed 固定宽  没有定义时则宽度会平均分配  高度则会随内容变化

表单

表单字段集
相当于一个方框，fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象,它自带间距
```
<fieldset></fieldset>
```
字段级标题
```
  <legend></legend>
```

legend标签在设置标签里面的文本内容水平居中的时候,如果用text-align:center;时整个标签都居中了,所以如果只是内容居中,可以用padding设置左右间距.

legend和fieldset一起使用, 会有字在线上的效果.

fieldset和legend一起用例子:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         fieldset{
             border: 0;
             border-top: 4px solid red;
         }
         legend{
             text-align: center;
             font-size: 18px;
             color: blueviolet;
             font-weight: 800;
         }
     </style>
 </head>
 <body>
     <fieldset>
         <legend>12</legend>
     </fieldset>
 </body>
 </html>

运行效果如下 (图片没有截图完全,实际文字水平居中):
以上代码运行结果

提示信息标签

<label for="box"></label>
label 提示信息标签  for="绑定控件id名"

lebal标签使用for进行绑定是为了让浏览器知道它对应的是哪个input

下拉菜单

  <select>
      <option>北京</option>
      <option selected>上海</option>
  </select>

selected的意思是默认显示,这里默认上海

文本域

  <textarea cols="40" rows="5">文本域</textarea>
         
         cols="字符宽度"    rows="行数"
      提示:汉字是两个字符,数字和字母是一个字符

去除textarea自动拖拽缩放效果:

        resize:none;

上传文件框

 <input type="file" multiple/>
  multiple="multiple"   multiple属性可实现多选

在新的HTML中如果属性名和属性值一样的话,可以写一个属性值

隐藏字段

 <input type="hidden"/>
 
 隐藏字段对于用户来说通常是不可见的，通常会存储一个默认值，通过js来修改

单选按钮

  <input type="radio" name=” ” value="  "/> 
  
   type="radio"单选按钮

单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。

多选按钮

    <input type="checkbox" name="  " disabled="disabled" checked="checked"/>
     type="checkbox" 多选按钮  name可加可不加 
     checked="checked"(选中) disabled="disabled"禁用

input中单选按钮,多选按钮调节样式

    :checked选择器 , 它是一个伪类选择器.权重为10, 设置单选或多选选中之后的样式

input 清除按钮默认的所有样式:

    appearance:none;
    
    清除之后能修改成自己想要的样式