选择器高级样式及布局

Posted huikejie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选择器高级样式及布局相关的知识,希望对你有一定的参考价值。

选择器高级

选择器高级

选择器高级主要是基础选择器的各种组合,分为以下三个:

1.群组选择器

技术图片
    <style>
    /* 群组选择器:可以同时控制多个标签 */
    /* 选择器位通过逗号隔开,每一个选择器位都可以为id、class、选择器组合   */
        a,.p2,#p1
            height: 10px;
        
    /*  这样就可以同时修改3个标签的样式  */
    </style>
技术图片

2.后代(子代)选择器

<!--后代选择器通过空格隔开,会在前面标签的所有后代标签中匹配-->
    eg: .d1 .h1
<!--子代选择器通过大于号隔开,只会在前面标签的所有子代标签中匹配-->
    eg: .d1>.h1
<!--后代子代选择器控制的只是最后一个标签,前面的都是修饰-->

3.兄弟选择器

<!--兄弟选择器通过波浪号~隔开,会匹配前面标签下面的兄弟标签-->
    eg:.d1~.h1
<!--相邻选择器通过加号+隔开,会匹配前面标签下面的相邻标签-->
    eg:.d1+h1
<!--兄弟相邻选择器控制的也只是最后一个,前面都是修饰-->
<!--兄弟相岭选择器存在的问题:无法匹配第一个-->

伪类选择器

技术图片
<!--伪类选择器-->
<!--见到: 或者是::就是伪类选择器-->
<!--伪类选择器影响优先级,一个伪类选择器相当于一个class-->
:nth-child()
:nth-of-type()
括号里面都是填的数字,并且是从1开始编号
:nth-child()
<!--    会先匹配层级关系,就是编号(每一个标签在父类标签中的编号)-->
<!--    匹配上了之后再匹配:之前的选择器-->
:nth-of-type()
<!--    会先匹配:之前的选择器(在同一个父级标签中)-->
<!--    再匹配层级关系,选择控制的标签-->
技术图片

a标签的四大伪类

技术图片
<!--a标签为超链接标签-->
<!--有四种伪类-->
1、 a:link   
<!--    a标签的初始化状态,就是没有点击过的状态-->
2、 a:hover
<!--    a标签的悬浮状态,就是鼠标放在上面的状态-->
3、 a:active
<!--    a标签的激活状态,就是鼠标点击下去的状态-->
4、 a:visited
<!--    a标签的访问过后的状态-->
<!--其中最重要的是悬浮状态与激活状态-->
技术图片

css样式

文本样式

技术图片
<!--字体大小(默认16px)-->
font-size: 16px 
<!--字族  可以跟多个(后面代表备用字体)-->
font-family: "微软雅黑" 
<!--字体颜色-->
color: black  
<!--水平位置 left center right-->
text-align: center  
<!--行高 默认文本在行高的垂直居中,要实现文本的垂直居中,让文本行高等于容器高-->
line-height: 100px  
<!--字重(粗细)100 - 900 或者用单词表示 -->
font-weight: 100px     
<!--文本划线 underline  overline  line-through none-->
text-decoration: underline     
<!--字体样式(斜体、加粗之类)-->
font-style: normal
技术图片

背景样式

技术图片
/*背景颜色*/
background-color: red;
/*背景图片 (会覆盖背景颜色)*/
background-image: url("");
/*平铺 no-repeat 不平铺 repeat-x X轴平铺 repeat-y Y轴平铺*/
background-repeat: no-repeat;
/*背景定位 x轴(left center right) y轴(top center bottom)*/
background-position-x: left;
/*也可以指定尺寸 x轴  y轴*/
background-position: 10px 10px;
/*精灵图指的是一张图片上有很多的页面内容,我们可以通过移动图片的位置来实现我们想要的效果*/
技术图片

边界圆角

技术图片
/*边界圆角 border-radius*/
/*只指定一个参数 百分号 或者 指定值*/
/*四个角都会做边界圆角的处理*/
border-radius: 10px;
/*指定多个参数*/
/*最多能指定四个参数,顺序从左上开始顺时针旋转,如果没有被指定就会去找对角的值 */
border-radius: 50% 10px;
/*x轴y轴分开指定,x轴y轴的参数需要用/分来,顺序一样,没有找对角*/
border-radius: 10px / 0 10px;
技术图片

显示方式

技术图片
显示方式分为四种
block: 1.可以指定宽高  2.自带换行 3.支持所有css样式
inline:1.宽高只能由文本撑开,不能自定义   2.不能换行  3.支持部分css样式
inline-block:1.可以指定宽高  2.不带换行  3.支持所有css样式
none  没有显示方式,就会在页面中隐藏

嵌套关系
block:可以嵌套 block、inline、inline-block
    div li 用来搭架构,可以任意嵌套  h1~h6 p只建议嵌套inline,就是用来转成文本的
inline:只嵌套inline
    span i b em strong      a一般都会修改他的显示方式display为block
inline-block 不建议嵌套任何标签
    img  input 都设计成了单标签
技术图片

block的显示规则

技术图片
/*
不同的显示规则是不同的
完成复杂的布局和样式都采用block的显示方式
block:分行显示 如果不去设置比宽高,宽度默认继承父标签 高度由内容撑开
inline:同行显示 宽高由内容撑开不用额外操作
inline-block:同行显示,一般会主动设置宽高,单独设置宽、高会等比缩放
*/
技术图片

overflow属性

技术图片
/*
我们先来看两个问题
    1.规定了标签的宽高,标签的内容超出了范围
    2.规定了标签的宽高,标签的子标签更大,超出了范围
如何让父级宽高限制内容和子集overflow
    hidden:隐藏,超出父级标签范围都会被隐藏起来
    auto:有超出的内容才会以滚动条显示超出的内容
    scroll:不管有没有超出内容,都会以滚动条的方式显示超出内容
*/
技术图片

布局

盒模型

技术图片
/*
盒模型
什么是盒模型:页面中的每一个标签都是一个盒模型
盒子的组成:外边距、边框、内边距、内容四部分组成

外边距:margin  控制盒子的整体位置
边框:border 控制边框的大小、颜色、样式
内边距:padding 控制文本内容距离边框的距离
内容:content 文本内容或者子标签的显示区域
*/
/*margin参考系:自身原有的位置*/
/*left 和 top 移动的是自身位置*/
margin-left: 10px; /*自身会向右移动10px*/
/*right 和 bottom 控制的是兄弟标签位置*/
margin-bottom: 10px; /*会把兄弟标签向下撑10px*/
/*margin可以指定四个参数(也是没有参数就找对边):
  margin top right bottom left*/
margin: 0; /*表示四个边都是0*/
margin: 0 auto; /*上下边是0 左右对半分(表示居中)*/

/*border 宽度 样式(solid实线 dashed虚线 dotted点状线) 颜色*/
border: 1px solid red;
/*
padding:控制的是内容和边框的距离
所以当你想要移动内容,又想内容全部显示出来
那就需要向哪移动多少,内容content就得向反方向移动多少
*/
技术图片

浮动布局

技术图片
/*
浮动布局 float
我们都知道,显示方式为block的标签都是自动换行的,不能同行显示
那么想要同行显示,就得用到浮动布局

一旦用了浮动布局:标签就不再撑开父级的高度了,但是会收到父级宽度的影响
float:left 从左开始浮起排序   right就是从右浮起

不再撑起父级高度之后父级高度就为0,一旦父级下面还有兄弟标签,就会和浮起的标签重合
如何避免重合的问题:清浮动 (就是让父级标签获得一个刚刚好的高度,可以容下浮起的标签)
content: "";
display: block;
清浮动的关键
clear: both;
就可以让父级清浮动
*/
div:after
  content: "";   display: block;   clear: both;
  
技术图片

以上是关于选择器高级样式及布局的主要内容,如果未能解决你的问题,请参考以下文章

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

布局中小部件的哪个样式表选择器?

CSS笔记

CSS基础

CSS学习总结

HTML前端入门归纳——样式