盒子总结

  1. '''
  2. block:
  3. 设置宽高
  4. 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width)
  5. 2.没有设置高,高由内容撑开
  6.  
  7. 设置了宽高
  8. 一定采用设置的宽高
  9.  
  10. 显示宽高
  11. border+padding+content
  12.  
  13. 自身布局
  14. margin-top | margin-left
  15.  
  16. 兄弟布局
  17. margin-bottom | margin-right
  18.  
  19. 父级水平居中
  20. margin:0 auto;
  21.  
  22. 与inline相关的盒子
  23. vertical-align
  24. '''

文本属性操作

  1. '''
  2. 字体设置:
  3. 颜色:color
  4. 字体大小:font-size
  5. 字重:font-weight:100~900(只能是100的倍数) | normal | lighter | bold
  6. 字族:可以设置备用字体,可以设置多个 font-family:"STSong","微软雅黑";
  7. 行高:line-height
  8. 文本垂直居中:将行高与盒子高度一致,这样文本就可以垂直居中
  9. 文本水平居中:text-align:center(right | center| left)
  10.  
  11. 简写方式:
  12. text-align:center
  13. color:red
  14. font:字重 大小/行高 字族 (顺序不能颠倒)
  15.  
  16. 字体缩进:
  17. text-indent:em是一个字的大小 rem(rootem):只与根有关系,及html的字体大小有关
  18. 子级的字体默认大小是继承及font-size:inherit
  19. 字体默认大小最小只能到12px,如果想要更小的话,只能改字族

reset操作

  1. '''
  2. 清除系统默认样式操作
  3. 大多系统预定义标签, 有默认样式, 不满足实际开发需求, 反倒影响布局, 通常在开发前, 将需要用到的预定义标签的默认样式清除, 该操作就称之为 reset操作
  4.  
  5. body, h1,h2,h3,h4,h5, h6, p {
  6.     margin: 0;
  7. }
  8. ul {
  9.     margin: 0;
  10.     padding: 0;
  11.     list-style: none; (清除列表前面的小点)
  12. }
  13. a {
  14.     text-decoration: none; (去掉了下滑线)
  15.     color: black;
  16. }
  17. '''

高级选择器

  1. '''
  2. 1.群组选择器:同时控制多个选择器,选择器之间用逗号隔开,每一个选择器位均可以替换为任意基础选择器或高级选择器
  3. div,p,a{
  4.  
  5. }
  6.  
  7. 2.后代子代选择器
  8. 通过关系层控制一个目标选择器,>代表父子关系 | 空格代表后代关系
  9. /*sub是sup1的子代*/
  10. .sup1 > .sub {
  11.     color: orange;
  12. }
  13.  
  14. /*sub是body的后代,但不是子代*/
  15. body .sub {
  16.     color: pink;
  17. }
  18.  
  19. 3.相邻选择器,兄弟选择器
  20. 通过关系层次控制一个目标选择器
  21. /* + 相邻关系 */
  22. .div1 + .div2{
  23.  
  24. }
  25.  
  26. /* ~ 兄弟关系*/
  27. .div1 ~ .div2{
  28.  
  29. }
  30.  
  31. 4.伪类选择器-位置
  32. what? 只要是以冒号开头的就是伪类选择器
  33. li:nth-child(2n) {
  34.  
  35. }
  36.  
  37. 5.多类名
  38. .d.dd {
  39.  
  40. }
  41. class="d dd"
  42. 6.交叉选择器
  43. .d.dd#dd.ddd{
  44.  
  45. }
  46. '''

高级选择器优先级

  1. """
  2. 优先级和个数(权重)相关
  3.  
  4. 基础选择器优先级占主导: id 无限大于 class 无限大于 标签,只要有一个id出现就不管后面的,如果都有个数相互抵消
  5. 选择器优先级相同时, 和顺序有关
  6. 高级选择器类型不会影响优先级,优先级与个数相关
  7. 伪类选择器相当于class
  8. """

边界圆角(了解)

  1. '''
  2. /*左上为第一个角, 顺时针赋值, 不足找对角*/
  3. /*border-radius: 30px 60px;*/
  4. /*border-radius: 150px;*/
  5. /*border-radius: 50%;*/ (如果超过盒子宽度的一半,就会平均分各取50%)
  6.  
  7. 横纵向分离
  8. /*横向第一个角50px, 第二个角10px, 不足找对角*/
  9. /*纵向均是150px*/
  10. border-radius: 50px 10px / 150px;
  11. '''

a标签的四大伪类

  1. '''
  2. 在a标签中通过color改变颜色
  3. :link  链接初始状态
  4. :hover  鼠标悬浮状态 ***** cousor改变悬浮上去游标的样式
  5. :visited  链接访问后的状态
  6. :active  鼠标按下时的状态 *** 要放到visited下面,要不就会受到影响
  7. 在其他标签中通过改变background-color改变背景的颜色
  8. '''

背景图片操作

  1. '''
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>背景图片</title>
  7.     <style>
  8.  
  9.         .div {
  10.             width: 500px;
  11.             height: 500px;
  12.             border: 1px solid black;
  13.         }
  14.         .div {
  15.             background-image: url("img/001.png");
  16.             /*平铺: repeat-x | repeat-y | repeat | no-repeat*/
  17.             background-repeat: no-repeat;
  18.             /*背景图片位置*/
  19.             /*水平: left|center|right  垂直:top|center|bottom*/
  20.             background-position: -200px 50px; 如果只设置一个值默认采用center
  21.         }
  22.         .div:hover {
  23.             transition: 2s; #过渡效果,2秒返回
  24.             background-position-x: center;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="div"></div>
  30. </body>
  31. </html>
  32. '''

背景图片之精灵图

  1. '''
  2. div {
  3.     background: url("img/bg.png") no-repeat 10px 20px;
  4.                     图片地址 不平铺 x轴偏移 y轴偏移
  5. }
  6. 精灵图操作本质: 控制背景图片的位置
  7. backgroud-position-x
  8. backgroud-position-y
  9. div:hover {
  10.     backgroud-position-y: -20px;
  11. }
  12. '''

　

盒子总结,文本属性操作,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. mysql 错误2002

    ERROR 2002 (HY000): Can’t connect to local MySQL server throughsocket ‘/tmp/mysql.sock’ (2) 今天遇到的200 ...

  2. node.js初识03

    node中的url var http = require("http"); var url = require("url"); var server = htt ...

  3. caffe在Linux下生成均值文件

    参照博客:https://blog.csdn.net/sinat_28519535/article/details/78533319

  4. 学习笔记<3>View接触

    一.View基本概念 1.界面上显示所有的控件都是用对象表示的,即有类,这些类都是View的子类. 2.View的种类 二.在Activity当中获取代表View的对象 1.根据ID可以用方法获取到对 ...

  5. U盘自动拷贝

    描述:启动该程序后,自动检测U盘是否存在,若存在,将U盘中所有的文件拷贝到电脑的指定目录下. 注:本篇博文仅支持技术讨论,不用于数据的盗取之类的黑科技. 本程序基于Win32开发,主要是利用Win32 ...

  6. 09 查找列表中元素，移除每个元素的空格，并查找以a或A开头并且以c结尾的所有元素

    li = ["alex"," aric","Alex","Tony","rain"]for i in ...

  7. Ngine X 完全开发指南 读书笔记-前言

    一开始接触的编程语言是VF,那是一种可视化编程语言,所谓的可视化,就是运行结果能直接看得到的,非常直观,便于调试,适合刚刚接触编程的新人学习.当时学得懵懂,半知半解,就是感觉程序非常神奇,常常几句代码 ...

  8. 【Hadoop学习之四】HDFS HA搭建（QJM）

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-3.1.1 由于NameNode对于整个HDF ...

  9. Presto上使用SQL遇到的一些坑

    本文转载自:https://segmentfault.com/a/1190000013120454?utm_source=tag-newest 最近换了新工作,在数据处理方面,公司是用Presto连接 ...

  10. flask 操作数据库（分类）

    数据库 数据库是大多数动态web程序的基础设施,只要你想把数据存下来,就离不开数据库. 这里所说的数据库指的是有存储数据的单个或多个文件组成的集合,它是一种容器,可以类比文文件柜.而人们通常使用数据库 ...