标签: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标签为超链接标签--> <!--有四种伪类--> 1、 a:link <!-- a标签的初始化状态,就是没有点击过的状态--> 2、 a:hover <!-- a标签的悬浮状态,就是鼠标放在上面的状态--> 3、 a:active <!-- a标签的激活状态,就是鼠标点击下去的状态--> 4、 a:visited <!-- a标签的访问过后的状态--> <!--其中最重要的是悬浮状态与激活状态-->
文本样式
<!--字体大小(默认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