码迷,mamicode.com
首页 > 其他好文 > 详细

选择器高级、样式及布局

时间:2019-07-09 09:36:15      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:float   超出   orm   设置   pre   图片   背景图片   auto   显示   

选择器高级

选择器高级

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

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;
  }
技术图片

选择器高级、样式及布局

标签:float   超出   orm   设置   pre   图片   背景图片   auto   显示   

原文地址:https://www.cnblogs.com/huikejie/p/11155134.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!