wed前段学习第三部分

超级闪电侠fff

已于 2023-03-26 16:38:18 修改

阅读量441

点赞数

文章标签：学习 css html

于 2022-11-04 18:44:05 首次发布

本文链接：https://blog.csdn.net/S788977SS/article/details/127637578

版权

css选择器

标签选择器（TAG选择器）

用法：写一个div｛｝标签；则页面中所有的<div></div>都选得到

群组选择器(分组选择器）

css：div,p,span{}

  <style>
        div ,#text ,.title{background:red;}
    </style>
</head>
<body>
    <div>这是一个测试</div>
    <p id="text">这是悲伤的一天</p>
    <h2 class="title">新疆大饼</h2>

通过逗号的方式给多个不同的选择器添加统一的css样式，来达到代码的复用

通配选择器

格式：#｛｝—>（包含了所有标签如div,ul,li,p,h1,h2…{}）
注意：尽量避免使用通配选择器，因为会给所有标签添加样式
使用场景：去掉所有标签的默认样式（但不是所有的标签都有默认样式）

层次选择器

m和n来代表两种标签
1.后代 m n {}(在m下找n)
2.父子 m >n {}(在m下找n而如果n中又包括m和n则无法再给n下面的n设置属性）
3.兄弟 m~n{} 当前m下面的所有兄弟n标签
4.相邻m+n{}当前m下面相邻的n标签

属性选择器

格式：m[ ] {}
*=:部分匹配
-：完全匹配
^=:起始匹配
$:结束匹配
[1] [2] [3]:组合匹配（同时有1.2.3标签的代码语句才会被选中）
如

div[class=search]{background:red}
</style>
</head>
<body>
    <div id="menu"> wdcdec</div>
    <div class="search">wed</div>
    <div class="search-button">wd2ddd</div>

[]中只有class=search那么只有第二行能加上样式，但是**=改成*=**则二三行都可以被选中

伪类选择器

css伪类用于像某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加
格式：M：伪类｛｝
：link 访问前的样式（只能添加给a标签）
：visited 访问后的样式（只能添加给a标签）
：hover 鼠标移入时的样式 (可以添加给所有的标签）
: active 鼠标按下时的样式 (可以添加给所有的标签）
如

<style>
        div{width:200px;height:100px;background:red}
        div:hover{background:blue}
        div:active{background:yellow}
       /*  div[class=search]{background:red} */
    </style>

注：1.如果四个伪类都生效，一定要注意顺序：L V H A
2.如果一般网站只这样去设置：a{} a:hover{}(这样设置完访问前后样式相同）
：after , ：before(通过伪类的方式给元素添加一段文本类容，使用content属性）
如：

 div:before{content:"wor";color:blueviolet}

在这里插入图片描述

：checked，：disabled，：focus（移入光标时）都是针对表单元素的
如

 :disabled{width:100px;height:100px}

在这里插入图片描述

结构伪类选择器

：nth-of-type()，：nth-child（）(角标是从1开始的，1表示第一项，2表示第二项）
：first-of-type，：first-child
: last-of-type, : last-child
：only-of-type，：only-child

 li:nth-of-type(2n+1){background:red}

在这里插入图片描述

css样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但可以设置继承属性 inherit值）

 div{width:300px;height:200px;border:1px red solid;color:aquamarine}
      p{border:inherit}

在这里插入图片描述
给div标签加属性，其中文字相关的属性可以被继承到p标签中。而要让他继承布局相关样式则要像上面的p{border:inherit}这样写。

css优先级

1.相同样式优先级
当设置相同样式时，后面的优先级较高，不建议出现重复设置样式的情况
2.内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级较高
3.单一样式优先级
style行间>id>class>标签>通配>继承
4.！important
提升样式优先级，非规范方式，不建议使用（不能针对继承的属性进行优先级的提升)
5.标签加类与单类
标签+类>单类
6.群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高
7.层次优先级

权重比较
ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100 注：这里的1 10等表示的是等级100个1相加等级也少于10
约分比较
ul li .box p input{} li p input{}
.hello span #elem{} #elem{}

css盒子模型

以快递来比喻
组成：content->padding->border->margin
物品填充物包装盒盒子与盒子间的间距

content：内容区域 width和height组成
padding：边内句（内填充）
只写一个值：30px(上下左右）
写两个值：30px 40px（上下，左右）
写四个值：30px，40px，20px，60px（上右下左）
单一样式只能写一个值：
padding-left，padding-right，padding-top,padding-bottom
注：1.背景颜色会填充到margin以内的区域
2.文字会出现在content区域
3.padding不能出现负值，margin是可以出现的
margin:外边距（外填充）
只写一个值：30px(上下左右）
写两个值：30px 40px（上下，左右）
写四个值：30px，40px，20px，60px（上右下左）
单一样式只能写一个值：
margin-left，margin-right，margin-top,margin-bottom

box-sizing

box-sizing属性允许你以特定方式定义匹配某个区域的特定元素，取值为content-box(默认值）/border-box
意为：盒尺寸，可以改变盒子模型的展示形态
默认值：content-box：width，height只赋值给content
border-box:width,height由content padding border三个分
使用场景:1.不用去计算一些值（要设置一个盒子的总宽高，只需设置box-sizing:border-box)
2.解决一些百分比的问题
注：如果这里出现这种问题

 #box{width:200px;height:200px;background-color: aqua;border:10px blueviolet solid;padding: 30px 50px;box-sizing: border-box;}

在这里插入图片描述
可能是电脑缩放比例造成的，当我把自己电脑缩放比换成150%时情况如下

盒子模型的问题

margin的叠加问题
当给两个盒子同时添加上下外边距的时候。就会出现叠加的问题，
这个问题，只有上下有，左右没有。会取上下中值较大的作为叠加的值
解决方法
1.BFC规范
2.想办法只给一个元素添加问题
margin传递问题
margin传递问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题。其他三个方向是没有传递问题的

#box{width: 200px;height:300px;background:rebeccapurple}
  #box1{width:100px;height:50px;background:yellowgreen}
    </style>
</head>
<body>
<div id="box">
  <div id="box1"></div>
</div>

在这里插入图片描述

#box{width: 200px;height:300px;background:rebeccapurple}
  #box1{width:100px;height:50px;background:yellowgreen;margin-top: 50px;}
    </style>
</head>
<body>
<div id="box">
  <div id="box1"></div>
</div>

在这里插入图片描述

解决方案：1.BFC规范
2.给父容器加边框
3.margin换成padding
margin自适应居中
1.margin左右自适应是可以的，但上下自适应是不行的

#box{width: 200px;height:100px;background:rebeccapurple}
  #box1{width:100px;height:50px;background:yellowgreen;margin:0 auto;}
    </style>
</head>
<body>
<div id="box">
  <div id="box1"></div>
</div>

在这里插入图片描述

2.width，height不设置时盒子模型会自动计算容器的大小

 #box{width: 200px;height:100px;background:rebeccapurple}
  #box1{width:100%;height:50px;background:yellowgreen;padding-left: 20px;border-left: bisque 5px solid;}
    </style>
</head>
<body>
<div id="box">
  <div id="box1"></div>
</div>

在这里插入图片描述

 #box{width: 200px;height:100px;background:rebeccapurple}
  #box1{height:50px;background:yellowgreen;padding-left: 20px;border-left: bisque 5px solid;}
    </style>
</head>
<body>
<div id="box">
  <div id="box1"></div>
</div>

在这里插入图片描述

标签分类

按类型
block（块）：div，p，ul,li,h1…。
1.独占一行
2.支持所有样式
3，不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形
inline(内联）:span,a,em,strong,img…
1.挨在一起
2.有些样式不支持如：width，height，margin，padding
3.不写宽的时候宽度由内容决定
4.所占区域不一定是矩形
5.两个内联之间会有空隙，由换行引起
inline-block:input,select…
1.挨在一起，但支持宽高

注：布局一般用块标签，修饰文本一般用内联标签
按类容
Flow：流元素
Metadata:元数据
Sectioning:分区
Heading:标题
Phrasing:措辞
Embedded:嵌入的
Interactive:互动的
详情:(https://www.w3.org/TR/html5/dom.html)
按显示
替换元素：浏览器根据元素的标签和属性。来决定元素的具体显示类容
img,input…
非替换元素：将内容直接告诉浏览器，将其显示出来
div,h1,p…

显示框类型

display：block inline inline-block none…
display ：none 不占空间
visibility：hidden 占空间但被隐藏

 <style>
      div{display:inline}
  #box{width: 200px;height:100px;background:rebeccapurple}
  #box1{height:50px;background:yellowgreen;}
    </style>
</head>
<body>
<div id="box">搜索</div>
<div id="box1">传递</div>

在这里插入图片描述

标签嵌套规范

ul,li
dl,dt,dd
table,tr,td
块标签可以嵌套内联标签如

<div>
        <span></span>
        <a  href="#"></a>
    </div>

块标签不一定能嵌套块标
如

 <p>
        <div></div>
    </p>

是错的
内联是不能嵌套块的
但有特殊的，如a标签可以（给一个区域加上了链接）

溢出隐藏

将块中溢出的元素选择形式
overflow：（如下）
visible:默认
hidden：隐藏
scroll：出现滚动条
auto;内容多时出现滚动条
x轴，y轴：overflow-x,overflow-y针对两个值分别设置

透明度与手势

opacity:0（透明，占空间）~1(不透明）
0.5（半透明）
注：占空间，所有的子内容也会透明
rgba（颜色）:0~1
注：可以让指定的样式透明，而不会影响其他样式，如下只对背景色设置透明度

 <style>
  #box{width: 200px;height:100px;background:rgba(255,0,0,0.3)}
  #box1{width: 100px;height:50px;background:rgba(255,0,0,0.5);}
    </style>
</head>
<body>
<div id="box">搜索</div>
<div id="box1">传递</div>
</body>

在这里插入图片描述

cursor：手势（鼠标样式）
default:默认
move：可移动样式
pointer:手型
…
自定义鼠标样式
要实现自定义手势：
准备图片：.cur,.ico(这样的格式）

cursor:url(图片地址和图片名.ico),auto;

最大，最小宽高

min-width,max-width,min-height,max-height（设置后块的大小在原宽高基础上根据内容多少决定）
注：强化对百分比单位的理解
%单位：以父容器的大小进行换算
一个容器怎么适应屏幕的高：容器加height：100%； body：100%； html:100%

css默认样式

有些标签有默认样式，有些标签没有默认样式
没有默认样式：div，span，…
有默认样式：body，h1…h6,p,ul,…
有的：body有marign:8px
h1有margin:上下 21.440px
font-weight：bold
p有margin:上下 16px
ul有margin:上下16px padding:左 40px
默认点：list-style：disc（点）
a有text-decoration:underline（下划线）;

css重置样式

css reset：
1.｛margin：0；padding：0；｝
优点：不用考虑那些标签有默认的margin和padding
缺点：稍微的影响性能
2.body，p，h1，ul｛margin：0；padding：0；｝
3.ul{ list-style : none;}
4.a{ text-decoration:none;color:#999;}
5.img{ dispaly:block}
问题的现象：图片跟容器底部有一些空隙
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的
6.vertical-align:baseline;基线对齐方式，默认值
7.**img{ vertical-align:bottom;}**解决方式是推荐的
写具体页面的时候或一个布局效果的时候：
1，写结构
2.css重置样式
3.写具体样式

float浮动

文档流
文档流是文档中可显示对象在排列时可占的位置
float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列。如果之前已经有浮动的元素，会挨着浮动的元素进行排列
float取值
left
right
none（默认）

float注意点

只会影响后面的元素
内容默认提升半层

  <style>
  #box{width: 50px;height:30px;background:red}
  #box1{width: 100px;height:50px;background:darkolivegreen;float: left;}
  #box2{width: 200px;height:100px;background:fuchsia}
    </style>
</head>
<body>
<div id="box">搜索</div>
<div id="box1">传递</div>
<div id="box2">微分中值定理加上edecevfvff</div>

在这里插入图片描述

默认宽根据内容决定
换行排列（可能出现第一行某个元素宽度太大造成，元素换行后被挡在那个元素后的情况）
主要给块元素添加，但也可以给内联元素添加

清除float浮动

上下排列时：clear属性，表清除浮动，left.right.both（不用考虑左右）
嵌套排列时：
固定宽高（把宽高固死，不适合做自适应效果。不推荐）
父元素浮动（不推荐，因为父容器浮动也会影响到后面的元素
overflow:hidden(BFC)规范，如果有子元素想溢出，那么会受到影响）
display：inline-block（BFC规范）(不推荐。父容器会影响到后面的元素
设置空标签：不推荐，会多添加一个标签)
after伪类：是空标签的加强版。目前各大公司的做法
如：.clear:after{content:’ ';clear:both;display:block}
（clear属性只会操作块标签，对内联标签不起作用）

超级闪电侠fff

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
wed前段学习第三部分

box-sizing属性允许你以特定方式定义匹配某个区域的特定元素，取值为content-box(默认值）| border-box。：nth-of-type()，：nth-child（）(角标是从1开始的，1表示第一项，2表示第二项）css伪类用于像某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加。}**解决方式是推荐的。提升样式优先级，非规范方式，不建议使用（不能针对继承的属性进行优先级的提升)通过逗号的方式给多个不同的选择器添加统一的css样式，来达到代码的复用。
复制链接

扫一扫