基础选择器


  2. 1.统配选择器
  3. 控制html,body及body内跟显示相关的标签
  4. *{
  5.     width:80px;
  6.     height:80px;
  7.     background-color:red;
  8. }
  9. 2.类选择器
  10. 以class起名的标签,控制class名匹配的标签
  11. (因为标签的class名可以重复)
  12. <div class="foo">123</a>
  13. .foo{ width:80px;
  14.     height:80px;
  15.     background-color:pink;
  16.     }
  17. 3.id选择器
  18. 以id起名的标签,控制id匹配的标签(id通过css控制是不可以重复的)
  19. <div class="foo" id="heh">456</div>
  20. #heh{width:80px;
  21.     height:80px;
  22.     background-color:yellow;
  23. }
  24. 4.行间式选择器
  25. <div style="width:80px;height:80px;background-color=green;">789<div>

选择器优先级

  1. 1.行间式选择器 2.id选择器 3.类选择器 4.统配选择器
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7.     <style>
  8.         *{width: 80px;
  9.         height:80px;
  10.         background-color: blue;}
  11.         .foo{width: 80px;
  12.         height:80px;
  13.         background-color: yellow}
  14.         #heh{
  15.             width: 80px;
  16.             height:80px;
  17.             background-color: green;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.      <div style="width: 80px;height: 80px;background-color: red">123</div>
  23.      <div class="foo">456</div>
  24.     <div id="heh">789</div>
  25.     <div>101112</div>
  26. </body>
  27. </html>
  28. #总结,控制范围越精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式
  29. 统配<标签<class<id<行间式<!important
  30. *{width:80px;height:80px;background-color:yellow!important;}
  31. #important写在属性值后和;之间

长度与颜色

  1. 长度单位:px mm cm em rem vw vh in
  2.     vw(百分比宽度,跟整个页面的宽)
  3.     vh(百分比高度,跟整个页面的高)
  4. 颜色:①颜色单词 red  yellow green
  5.    	②#号十六进制数 范围(000000-FFFFFF)
  6.     abc = aabbcc
  7.     ③三原色rgb(0-255,0-255,0-255)
  8.     	rgba(0-255,0-255,0-255,0-1)
  9.         最后一个参数,透明度,1不透明,0全透明

显示方式display

  1. 标签的分类:
  2. 一.单双标签:
  3.     单标签:br,hr,img,meta,link
  4.     功能具体,不需要内容,设置为单标签,单标签结束符在标签尾部,可以省略
  5.     主功能
  6. 	双标签:h1,span,p,div
  7.         具有子标签,包含内容,设置为双标签,双标签首尾分离
  8.      主内容
  10.  二.通过display属性值进行划分
  11. inline block inline-block
  12. ①inline :同行显示,支持部分css样式(不支持宽高),宽高由文本内容撑开
  13. ②block:异行显示,支持所有css样式,设置了宽高就采用设置的值,宽高由默认的特性
  14. ③inline-block:同行显示,支持所有css样式,设置了宽高就采用设置的值
  15. inline-block 是以文本内容作为对齐标准的,要更改对齐标准,需要使用属性vertical(垂直)-align(对齐)
  16. 四种属性值baseline(文本底端对齐 默认值)
  17. top:标签顶端对齐 middle:标签中线对齐
  18. bottom:标签底端对齐
  20. 总结:带有inline的会同行显示,带有block的支持所有css样式
  21.     带有inline的与内容相关,默认对齐标准以内容为准
  22. <!DOCTYPE html>
  23. <html lang="en">
  24. <head>
  25.     <meta charset="UTF-8">
  26.     <title>Title</title>
  27.     <style>
  28.         span{
  29.             width:80px;
  30.             height:80px;
  31.             background-color: red;
  32.         }
  33.         div{
  34.             width:80px;
  35.             height:80px;
  36.             background-color: yellow;
  37.             display: inline-block;
  38.             vertical-align: top;
  39.         }
  40.         img {
  41.             width:80px;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46. <span>123456</span>
  47. <span>123456</span>
  48. <div>123456</div>
  49. <div>123456</div>
  50. <img src="http://img4.imgtn.bdimg.com/it/u=3335258443,1321329535&fm=11&gp=0.jpg">
  51. <img src="http://img4.imgtn.bdimg.com/it/u=3335258443,1321329535&fm=11&gp=0.jpg">
  52. </body>
  53. </html>

嵌套关系

  1. 页面就是由标签一层层嵌套关系形成
  2. 嵌套关系有一定的规则:
  3. 1.inline类型只嵌套inline类型的标签
  4. 理解:inline就是同行显示,目前的标签<span></span>是同行显示,不常用,而且也不会嵌套标签在其内部
  5. 2.inline-block类型,不建议嵌套任意标签,所以系统的inline-block都设计成了单标签(默认宽高)
  6. 理解:单标签,我们学了meta,img,link等都是Inline-block类型,都是单标签,自然不会再嵌套标签在其内部
  7. 3.block类型可以嵌套任意类型标签(hn,p一般只嵌套inline标签)
  8. 最常用的div就是block类型,支持所有css样式,可以嵌套任意类型
  10. 如何让div中的内容同行显示,就需要用到盒模型,来配置我们的标签内容

盒模型

![M(CWKLLY@4SAT[6JI1QM9IB](C:\Users\bobo\Desktop\M(CWKLLY@4SAT[6JI1QM9IB.png)

  1. 1.由四部分组成:
  2. margin :外边距,控制盒子的位置(布局),通过左和上控制自身位置,通过右和下影响兄弟盒子位置(划区域)
  3. border:边框,样式/宽度/颜色
  4. padding:内边距,从显示角度控制文本的显示区域
  5. content(文本内容)
  6. 注意:margin,padding:起始为上,顺时针一次赋值,不足边取对边
  8. 要做到文本内移,设置padding,如果想显示区域不变,相应减少content
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         div{
  8.             width:80px;/*content的参数*/
  9.             height:80px;
  10.             background-color: red;
  11.             padding:10px;/*默认四边间距都是10px*/
  12.             /*padding: 10px 5px;从上开始,顺时针赋值,上间距10,右间距5,没赋值的对称匹配*/
  13.             /*
  14.             padding-bottom: 10px;
  15.             padding-left:10px ;
  16.             padding-right:10px;
  17.             padding-top:10px;*/
  18.             border: 5px solid yellow;
  19.             /*border三个参数,宽度,颜色,样式(实线,虚线等)*/
  20.             /*border-color: yellow;
  21.             border-style: dotted;
  22.             border-width:5px ;*/
  23.             margin: 10px 5px;
  24.              /*margin-top:20px ;
  25.             margin-left:20px ;
  26.             margin-right:20px ;
  27.             margin-bottom:20px ;*/
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div>123456</div>
  33.     <div>654321</div>
  34. </body>
  35. </html>

盒模型布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body{margin: 0} <!--将body外框间距变为0-->
  8.         div{
  9.             width:78px;
  10.             height:33px;
  11.         background-color: blueviolet;
  12.             border: black solid 1px;
  13.             }
  14.         .d2{margin-left:calc(80px *1) ;
  15.             margin-top:-35px;}
  16.         .d3{margin-left:calc(80px *2) ;
  17.             margin-top:-35px;}
  18.         .d4{margin-left:calc(80px *3) ;
  19.             margin-top:-35px;}
  20.         .d5{margin-left:calc(80px *4) ;
  21.             margin-top:-35px;}
  22.         .d6{margin-left:calc(80px *5) ;
  23.             margin-top:-35px;}
  24.         .d7{margin-left:calc(80px *6) ;
  25.             margin-top:-35px;}
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="d1">1</div>
  31.     <div class="d2">2</div>
  32.     <div class="d3">3</div>
  33.     <div class="d4">4</div>
  34.     <div class="d5">5</div>
  35.     <div class="d6">6</div>
  36.     <div class="d7">7</div>
  37. </body>
  38. </html>

margin两个坑

  1. 1.要求b1与b2上下间距50px时
  2. 方法一:将b1底部加长50px  margin-bottom: 50px;
  3. 方法二:将b2顶部加长50px  margin-top:50px ;
  4. 坑:当b1底部和b2顶部同时加长50px时,发现两者间距仍然为50px
  5. 总结:盒模型上下间距时,会重叠,间距以两者间距离较大距离为最后的间距
  6.     左右叠加正常,不会重叠
  1. <!--需求将b1与b2上下间距50px-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7.     <style>
  8.         body{
  9.             margin:0;}
  10.         .b1{
  11.             width: 80px;
  12.             height:80px;
  13.             background-color: cornflowerblue;
  14.             /*第一种方法
  15.             margin-bottom: 50px;*/
  16.             margin-bottom:50px;
  17.         }
  18.         .b2{
  19.             width: 80px;
  20.             height:80px;
  21.             background-color: blue;
  22.             /*第二种方法
  23.             margin-top:50px*/
  24.             margin-top:50px ;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div class="b1">1234</div>
  30. <div class="b2">5678</div>
  31. </body>
  32. </html>
  1. 第二个坑 :第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值
  2.         解决方案: 1.父级设置border-top | 2.父级设置padding-top
  3.         向左移动不会有相同现象
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body{margin:0}
  8.         .main{
  9.             width: 400px;
  10.             height:400px;
  11.             background-color: red;
  12.             /*解决方法1,将父标签内边距改变.将父标签与子标签解耦合
  13.             padding: 1px;*/
  14.             /*解决方法2,设置父标签上边框
  15.             border-top:black solid 1px;*/
  16.         }
  17.         .sub1{
  18.             width: 100px;
  19.             height:100px;
  20.             background-color: blueviolet;
  21.             margin-top:50px/*子标签1会带着父标签一起偏移*/
  22.         }
  23.         .sub2{
  24.             width: 100px;
  25.             height:100px;
  26.             background-color: yellow;
  27.             margin-top: 50px;/*子标签2自己移动并不会带动父标签移动*/
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <section class="main">
  33.         <section class="sub1">
  34.         </section>
  35.         <section class="sub2">
  36.         </section>
  37.     </section>
  39. </body>
  40. </html>

前端,基础选择器,嵌套关系.display属性,盒模型的更多相关文章

  1. CSS基础：块级元素与盒模型

    简介 在 HTML4.01 中,元素通常可以分为块级元素( “Block-level element” ) 和内联元素 ( "Inline-level element" ) 两大类 ...

  2. WEB前端基础之SCC(字体颜色背景-盒子模型)

    目录 一:伪元素选择器 1.首字调整>>>:也是一种文档布局的方式 2.在文本的前面通过css动态渲染文本>>>:特殊文本无法选中 3.在文本的后面通过css动态渲 ...

  3. CSS基础知识---浮动，定位和盒模型

    转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...

  4. 【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局

    1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含conte ...

  5. 前端基础问题：CSS vertical-align 属性

    CSS vertical-align 属性与基线的那些事~ 定义和用法: vertical-align 属性设置元素的垂直对齐方式. vertical-align只对内联元素(inline.inlin ...

  6. 前端学习 -- Css -- 内联元素的盒模型

    内联元素不能设置width和height: 设置水平内边距,内联元素可以设置水平方向的内边距:padding-left,padding-right: 垂直方向内边距,内联元素可以设置垂直方向内边距,但 ...

  7. day47 选择器优先级及嵌套关系

    复习 1.前端: 网页, html + css + js 2.html三个组成部分:标签,指令和转义字符 标签: <>包裹, 以字母开头, 可以结合-|数字, 能被浏览器解析的标记 3.常 ...

  8. day48 前端高级选择器优先级

    复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...

  9. 02 前端基础之CSS

    目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...

随机推荐

  1. STP-4-每VLAN生成树和Trunk上的STP

    如果在有冗余链路且有多个VLAN的交换网络中只使用 STP实例,那么在稳定状态中,仍会有一些端口处于阻塞状态不被使用,冗余链路实际上变成了备份链路. PVST+特性能为每个VLAN创建一个STP实例. ...

  2. [題解]51nod_1515_明辨是非

    好久沒有話多了,是覺得有點浪費時間,今天考試和一中用的一樣的題,結果反而考得不好,不過Jackpei一句知恥而後勇點醒夢中人偷偷@Jackpei 就是這樣吧 還有我極度懷疑我的鍵帽打油了......我 ...

  3. ssrs 小技巧

    1. 使用 RowNumber() 增加行号 =RowNumber("DataSet1") 2. 单双行 变色 =iif(RowNumber(Nothing) Mod 2, &qu ...

  4. wireshark工具集

    tshark 查看pcap文件第一个包的时间,当文件名不包含时间信息时非常有帮助 tshark -c 1 -T fields -e frame.time -r test.pcap dumpcap ed ...

  5. Autofac框架使用遇到的问题

    1) 安全透明方法“Autofac.Integration.Mvc.RegistrationExtensions.RegisterControllers(Autofac.ContainerBuilde ...

  6. SQL server函数

    一般在开发中用到的函数 标量函数用的比较多 标量函数:就是返回一个单一的结果值 下面介绍一下标量函数的语法 create function GetFunction  --创建函数 (   @name ...

  7. 【转】常用邮箱的 IMAP/POP3/SMTP 设置

    POP3 POP3是Post Office Protocol 3的简称,即邮局协议的第3个版本,它规定怎样将个人计算机连接到Internet的邮件服务器和下载电子邮件的电子协议.它是因特网电子邮件的第 ...

  8. 从零开始利用vue-cli搭建简单音乐网站（六）

    上一篇遗漏了一个简单的效果没写,见下图: 主页面点击热门推荐和更多之后跳转到歌曲列表页面,现在的页面只是简单的把所有歌曲列出来,没有进行排序.实现起来也很简单,在MainPage的两个链接上添加: & ...

  9. 用YII实现多重查询(基于tag)

    场景: 有一个饭店表 restaurant,存放所有饭店记录.我需要一个功能,将饭店按照不同的条件进行多重查询.就象这样:   氛围:浪漫 / 商务会谈 / 茅草屋 菜系:川菜 / 鲁菜 / 家常菜. ...

  10. Android学习总结（十四） ———— ListView Item多布局的实现

    一.基本概念 实现一个Item的多布局.像我们经常在用的各种即时通讯工具,QQ.微信等,假设他们的会话界面是ListView实现的,那么ListView就有多种Item布局,要实现ListView里面 ...