盒子总结

'''

block:

设置宽高

1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width)

2.没有设置高,高由内容撑开

设置了宽高

一定采用设置的宽高

显示宽高

border+padding+content

自身布局

margin-top | margin-left

兄弟布局

margin-bottom | margin-right

父级水平居中

margin:0 auto;

与inline相关的盒子

vertical-align

'''

文本属性操作

'''

字体设置:

颜色:color

字体大小:font-size

字重:font-weight:100~900(只能是100的倍数) | normal | lighter | bold

字族:可以设置备用字体,可以设置多个 font-family:"STSong","微软雅黑";

行高:line-height

文本垂直居中:将行高与盒子高度一致,这样文本就可以垂直居中

文本水平居中:text-align:center(right | center| left)

简写方式:

text-align:center

color:red

font:字重 大小/行高 字族 (顺序不能颠倒)

字体缩进:

text-indent:em是一个字的大小 rem(rootem):只与根有关系,及html的字体大小有关

子级的字体默认大小是继承及font-size:inherit

字体默认大小最小只能到12px,如果想要更小的话,只能改字族

reset操作

'''

清除系统默认样式操作

大多系统预定义标签, 有默认样式, 不满足实际开发需求, 反倒影响布局, 通常在开发前, 将需要用到的预定义标签的默认样式清除, 该操作就称之为 reset操作

body, h1,h2,h3,h4,h5, h6, p {

    margin: 0;

}

ul {

    margin: 0;

    padding: 0;

    list-style: none; (清除列表前面的小点)

}

a {

    text-decoration: none; (去掉了下滑线)

    color: black;

}

'''

高级选择器

'''

1.群组选择器:同时控制多个选择器,选择器之间用逗号隔开,每一个选择器位均可以替换为任意基础选择器或高级选择器

div,p,a{

}

2.后代子代选择器

通过关系层控制一个目标选择器,>代表父子关系 | 空格代表后代关系

/*sub是sup1的子代*/

.sup1 > .sub {

    color: orange;

}

/*sub是body的后代,但不是子代*/

body .sub {

    color: pink;

}

3.相邻选择器,兄弟选择器

通过关系层次控制一个目标选择器

/* + 相邻关系 */

.div1 + .div2{

}

/* ~ 兄弟关系*/

.div1 ~ .div2{

}

4.伪类选择器-位置

what? 只要是以冒号开头的就是伪类选择器

li:nth-child(2n) {

}

5.多类名

.d.dd {

}

class="d dd"

6.交叉选择器

.d.dd#dd.ddd{

}

'''

高级选择器优先级

"""

优先级和个数(权重)相关

基础选择器优先级占主导: id 无限大于 class 无限大于 标签,只要有一个id出现就不管后面的,如果都有个数相互抵消

选择器优先级相同时, 和顺序有关

高级选择器类型不会影响优先级,优先级与个数相关

伪类选择器相当于class

"""

边界圆角(了解)

'''

/*左上为第一个角, 顺时针赋值, 不足找对角*/

/*border-radius: 30px 60px;*/

/*border-radius: 150px;*/

/*border-radius: 50%;*/ (如果超过盒子宽度的一半,就会平均分各取50%)

横纵向分离

/*横向第一个角50px, 第二个角10px, 不足找对角*/

/*纵向均是150px*/

border-radius: 50px 10px / 150px;

'''

a标签的四大伪类

'''

在a标签中通过color改变颜色

:link  链接初始状态

:hover  鼠标悬浮状态 ***** cousor改变悬浮上去游标的样式

:visited  链接访问后的状态

:active  鼠标按下时的状态 *** 要放到visited下面,要不就会受到影响

在其他标签中通过改变background-color改变背景的颜色

'''

背景图片操作

'''

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>背景图片</title>

    <style>

        .div {

            width: 500px;

            height: 500px;

            border: 1px solid black;

        }

        .div {

            background-image: url("img/001.png");

            /*平铺: repeat-x | repeat-y | repeat | no-repeat*/

            background-repeat: no-repeat;

            /*背景图片位置*/

            /*水平: left|center|right  垂直:top|center|bottom*/

            background-position: -200px 50px; 如果只设置一个值默认采用center

        }

        .div:hover {

            transition: 2s; #过渡效果,2秒返回

            background-position-x: center;

        }

    </style>

</head>

<body>

    <div class="div"></div>

</body>

</html>

'''

背景图片之精灵图

'''

div {

    background: url("img/bg.png") no-repeat 10px 20px;

                    图片地址 不平铺 x轴偏移 y轴偏移

}

精灵图操作本质: 控制背景图片的位置

backgroud-position-x

backgroud-position-y

div:hover {

    backgroud-position-y: -20px;

}

'''

　

盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图的更多相关文章

  1. 清除系统默认样式，文本样式,高级选择器(权重),边界圆角，a标签的四大伪类，背景图片

    清除系统默认样式 大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; ...

  2. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

  3. from提交数据，高级选择器，伪类选择器，前端样式等

    1. form提交数据 get: 不安全的提交数据,高效 post: 安全的提交数据,低效 前台都可以给后台提交数据,后台一定会给前台一个反馈结果 2. 高级选择器 <!DOCTYPE html ...

  4. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  5. css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景

    什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...

  6. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  7. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  8. 前端（十八）—— jQuery高级操作：选择器、文本属性与类、事件、文档操作、动画、结构关系

    JQ选择器.文本属性与类.事件.文档操作.动画.结构关系 可参考jQuery的API文档 一.选择器 1.css语法匹配 标签 | 类 | id | 交集 群组 | 后代 | 兄弟 伪类 | 属性 $ ...

  9. C# 操作 Word 修改word的高级属性中的自定义属性2

    word的类库使用的是word2007版本的类库,类库信息见下面图片,折腾了半天,终于找到入口,网上 很多说的添加或者修改word的高级属性中的自定义属性都是错误的,感觉都是在copy网上的代码,自己 ...

随机推荐

  1. 关于随机数、方法重载和System.out.println()的认识

    (1)使用纯随机数发生器编写一个指定数目内数字的程序(类真随机数) 源代码: package Demo1; public class trueRandom { long Multiplier = 45 ...

  2. php $_FILES上传失败 error返回值说明

    用PHP上传文件时,我们会用程序去监听浏览器发送过来的文件信息,首先会通 过$_FILES[fieldName]['error']的不同数值来判断此欲上传的文件状态是否正常. $_FILES[fiel ...

  3. 字符串转化为int数组

    String a = "1,2,3,4,5,6" String str[] = a.split(","); int array[] = new int[str. ...

  4. mysql----------阿里云RDS导入导出

    1.这是阿里云rds如何将导出的物理备份文件,导入到自建库里面: https://help.aliyun.com/knowledge_detail/5973700.html?spm=5176.7766 ...

  5. lumisoft.net 邮件管理系列文章 - 如何判断附件为内嵌式还是附加式

    如果要区分邮件里面的附件是内嵌图片附件还是真正的附件,那么可以通过下面代码进行判断,如果是MIME_DispositionTypes.Attachment的就是普通附件,MIME_Dispositio ...

  6. laravel orm

    ###多对多关系 多对多关系和之前的关系完全不一样,因为多对多关系可能出现很多冗余数据,用之前自带的表存不下了. 我们定义两个模型:Article 和 Tag,分别表示文章和标签,他们是多对多的关系. ...

  7. CentOS下挂载数据盘

    CentOS下挂载数据盘 1.显示磁盘使用情况:#df 2.显示磁盘:#fdisk -l 3.格式化分区:#mkfs.ext4 /dev/vdb1           //注:将/dev/vdb1格式 ...

  8. kettle杂记

    版本8.0,以下是我在使用kettle时候的一些小tips 1.“插入/更新”必须指定字段,“表输出”无需指定字段,但是源表的字段必须包含在目标表中,否则unknown colum! 2.连接数据库时 ...

  9. STL算法中函数对象和谓词

    函数对象和谓词定义 函数对象: 重载函数调用操作符的类,其对象常称为函数对象(function object),即它们是行为类似函数的对象.一个类对象,表现出一个函数的特征,就是通过“对象名+(参数列 ...

  10. html5-progress和meter用法

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...