前端,基础选择器,嵌套关系.display属性,盒模型
基础选择器
1.统配选择器
控制html,body及body内跟显示相关的标签
*{
width:80px;
height:80px;
background-color:red;
}
2.类选择器
以class起名的标签,控制class名匹配的标签
(因为标签的class名可以重复)
<div class="foo">123</a>
.foo{ width:80px;
height:80px;
background-color:pink;
}
3.id选择器
以id起名的标签,控制id匹配的标签(id通过css控制是不可以重复的)
<div class="foo" id="heh">456</div>
#heh{width:80px;
height:80px;
background-color:yellow;
}
4.行间式选择器
<div style="width:80px;height:80px;background-color=green;">789<div>
选择器优先级
1.行间式选择器 2.id选择器 3.类选择器 4.统配选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{width: 80px;
height:80px;
background-color: blue;}
.foo{width: 80px;
height:80px;
background-color: yellow}
#heh{
width: 80px;
height:80px;
background-color: green;
}
</style>
</head>
<body>
<div style="width: 80px;height: 80px;background-color: red">123</div>
<div class="foo">456</div>
<div id="heh">789</div>
<div>101112</div>
</body>
</html>
#总结,控制范围越精确,优先级越高,所设置的样式就会覆盖优先级低的相同属性样式
统配<标签<class<id<行间式<!important
*{width:80px;height:80px;background-color:yellow!important;}
#important写在属性值后和;之间
长度与颜色
长度单位:px mm cm em rem vw vh in
vw(百分比宽度,跟整个页面的宽)
vh(百分比高度,跟整个页面的高)
颜色:①颜色单词 red yellow green
②#号十六进制数 范围(000000-FFFFFF)
abc = aabbcc
③三原色rgb(0-255,0-255,0-255)
rgba(0-255,0-255,0-255,0-1)
最后一个参数,透明度,1不透明,0全透明
显示方式display
标签的分类:
一.单双标签:
单标签:br,hr,img,meta,link
功能具体,不需要内容,设置为单标签,单标签结束符在标签尾部,可以省略
主功能
双标签:h1,span,p,div
具有子标签,包含内容,设置为双标签,双标签首尾分离
主内容
二.通过display属性值进行划分
inline block inline-block
①inline :同行显示,支持部分css样式(不支持宽高),宽高由文本内容撑开
②block:异行显示,支持所有css样式,设置了宽高就采用设置的值,宽高由默认的特性
③inline-block:同行显示,支持所有css样式,设置了宽高就采用设置的值
inline-block 是以文本内容作为对齐标准的,要更改对齐标准,需要使用属性vertical(垂直)-align(对齐)
四种属性值baseline(文本底端对齐 默认值)
top:标签顶端对齐 middle:标签中线对齐
bottom:标签底端对齐
总结:带有inline的会同行显示,带有block的支持所有css样式
带有inline的与内容相关,默认对齐标准以内容为准
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
width:80px;
height:80px;
background-color: red;
}
div{
width:80px;
height:80px;
background-color: yellow;
display: inline-block;
vertical-align: top;
}
img {
width:80px;
}
</style>
</head>
<body>
<span>123456</span>
<span>123456</span>
<div>123456</div>
<div>123456</div>
<img src="http://img4.imgtn.bdimg.com/it/u=3335258443,1321329535&fm=11&gp=0.jpg">
<img src="http://img4.imgtn.bdimg.com/it/u=3335258443,1321329535&fm=11&gp=0.jpg">
</body>
</html>
嵌套关系
页面就是由标签一层层嵌套关系形成
嵌套关系有一定的规则:
1.inline类型只嵌套inline类型的标签
理解:inline就是同行显示,目前的标签<span></span>是同行显示,不常用,而且也不会嵌套标签在其内部
2.inline-block类型,不建议嵌套任意标签,所以系统的inline-block都设计成了单标签(默认宽高)
理解:单标签,我们学了meta,img,link等都是Inline-block类型,都是单标签,自然不会再嵌套标签在其内部
3.block类型可以嵌套任意类型标签(hn,p一般只嵌套inline标签)
最常用的div就是block类型,支持所有css样式,可以嵌套任意类型
如何让div中的内容同行显示,就需要用到盒模型,来配置我们的标签内容
盒模型
1.由四部分组成:
margin :外边距,控制盒子的位置(布局),通过左和上控制自身位置,通过右和下影响兄弟盒子位置(划区域)
border:边框,样式/宽度/颜色
padding:内边距,从显示角度控制文本的显示区域
content(文本内容)
注意:margin,padding:起始为上,顺时针一次赋值,不足边取对边
要做到文本内移,设置padding,如果想显示区域不变,相应减少content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:80px;/*content的参数*/
height:80px;
background-color: red;
padding:10px;/*默认四边间距都是10px*/
/*padding: 10px 5px;从上开始,顺时针赋值,上间距10,右间距5,没赋值的对称匹配*/
/*
padding-bottom: 10px;
padding-left:10px ;
padding-right:10px;
padding-top:10px;*/
border: 5px solid yellow;
/*border三个参数,宽度,颜色,样式(实线,虚线等)*/
/*border-color: yellow;
border-style: dotted;
border-width:5px ;*/
margin: 10px 5px;
/*margin-top:20px ;
margin-left:20px ;
margin-right:20px ;
margin-bottom:20px ;*/
}
</style>
</head>
<body>
<div>123456</div>
<div>654321</div>
</body>
</html>
盒模型布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin: 0} <!--将body外框间距变为0-->
div{
width:78px;
height:33px;
background-color: blueviolet;
border: black solid 1px;
}
.d2{margin-left:calc(80px *1) ;
margin-top:-35px;}
.d3{margin-left:calc(80px *2) ;
margin-top:-35px;}
.d4{margin-left:calc(80px *3) ;
margin-top:-35px;}
.d5{margin-left:calc(80px *4) ;
margin-top:-35px;}
.d6{margin-left:calc(80px *5) ;
margin-top:-35px;}
.d7{margin-left:calc(80px *6) ;
margin-top:-35px;}
</style>
</head>
<body>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
<div class="d7">7</div>
</body>
</html>
margin两个坑
1.要求b1与b2上下间距50px时
方法一:将b1底部加长50px margin-bottom: 50px;
方法二:将b2顶部加长50px margin-top:50px ;
坑:当b1底部和b2顶部同时加长50px时,发现两者间距仍然为50px
总结:盒模型上下间距时,会重叠,间距以两者间距离较大距离为最后的间距
左右叠加正常,不会重叠
<!--需求将b1与b2上下间距50px-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;}
.b1{
width: 80px;
height:80px;
background-color: cornflowerblue;
/*第一种方法
margin-bottom: 50px;*/
margin-bottom:50px;
}
.b2{
width: 80px;
height:80px;
background-color: blue;
/*第二种方法
margin-top:50px*/
margin-top:50px ;
}
</style>
</head>
<body>
<div class="b1">1234</div>
<div class="b2">5678</div>
</body>
</html>
第二个坑 :第一个有显示区域的子级会和父级联动(margin-top重叠), 取大值
解决方案: 1.父级设置border-top | 2.父级设置padding-top
向左移动不会有相同现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{margin:0}
.main{
width: 400px;
height:400px;
background-color: red;
/*解决方法1,将父标签内边距改变.将父标签与子标签解耦合
padding: 1px;*/
/*解决方法2,设置父标签上边框
border-top:black solid 1px;*/
}
.sub1{
width: 100px;
height:100px;
background-color: blueviolet;
margin-top:50px/*子标签1会带着父标签一起偏移*/
}
.sub2{
width: 100px;
height:100px;
background-color: yellow;
margin-top: 50px;/*子标签2自己移动并不会带动父标签移动*/
}
</style>
</head>
<body>
<section class="main">
<section class="sub1">
</section>
<section class="sub2">
</section>
</section>
</body>
</html>前端,基础选择器,嵌套关系.display属性,盒模型的更多相关文章
- CSS基础：块级元素与盒模型
简介 在 HTML4.01 中,元素通常可以分为块级元素( “Block-level element” ) 和内联元素 ( "Inline-level element" ) 两大类 ...
- WEB前端基础之SCC(字体颜色背景-盒子模型)
目录 一:伪元素选择器 1.首字调整>>>:也是一种文档布局的方式 2.在文本的前面通过css动态渲染文本>>>:特殊文本无法选中 3.在文本的后面通过css动态渲 ...
- CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
- 【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局
1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含conte ...
- 前端基础问题：CSS vertical-align 属性
CSS vertical-align 属性与基线的那些事~ 定义和用法: vertical-align 属性设置元素的垂直对齐方式. vertical-align只对内联元素(inline.inlin ...
- 前端学习 -- Css -- 内联元素的盒模型
内联元素不能设置width和height: 设置水平内边距,内联元素可以设置水平方向的内边距:padding-left,padding-right: 垂直方向内边距,内联元素可以设置垂直方向内边距,但 ...
- day47 选择器优先级及嵌套关系
复习 1.前端: 网页, html + css + js 2.html三个组成部分:标签,指令和转义字符 标签: <>包裹, 以字母开头, 可以结合-|数字, 能被浏览器解析的标记 3.常 ...
- day48 前端高级选择器优先级
复习 1. 基础选择器 标签选择器(div) | 类选择器(.div1) | id选择器(#div2) <div class="div1" id="div2&quo ...
- 02 前端基础之CSS
目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...
随机推荐
- B. Dispersed parentheses 记忆化搜索 + 括号序列的状压表示
http://codeforces.com/gym/100633/problem/B B. Dispersed parentheses time limit per test 2 seconds me ...
- Centos7中查看IP命令：IP addr
Centos的IP地址是网卡的inet 的值,很明显第一个是本地服务地址,不是我们想要的.第二个没有inet这个属性值. 接下来配置网卡,我的网卡是上图黄色方框中第一行开始的那一部分:eno16777 ...
- public private protected 三种访问修饰符在c#中的区别
1. public 公有的可见性:在类自身内部可见: 可被子类继承: 类外部可见 2. protected 受保护的可见性:在类自身内部可见: 可被子类继承: 类外部不可见 3. private 私有 ...
- VS局域网断点调试设置
1.电脑文档文件夹下\IISExpress\config文件内找到applicationhost.config文件编辑 找到<sites>节点 找到你要编辑的site节点 在<bin ...
- Brackets前端开发编辑器
http://www.cnblogs.com/xiazdong/p/3550148.html http://blog.csdn.net/shinesun001/article/details/5348 ...
- 微信小程序---图片上传+服务端接受
原文地址:http://blog.csdn.net/sk719887916/article/details/54312573 微信小程序,图片上传,应用地方-修改用户信息的头像. 详细代码: 小程序的 ...
- 用户会话跟踪机制（session+cookie）
最近在优化之前给学校写的一个项目,发现了同一个浏览器(IE,Firefox)开多个选项卡的时候不能登录多个用户,后一个登录用户会把前一个用户给覆盖了,我的登录逻辑是把user对象存放到session中 ...
- substring和substr,slice和splice
substring 和 substr 这二货都是针对字符串而言的,且都是返回一个副本,而不是在原字符串上直接操作. 上代码: var str = '0123456789'; console.log( ...
- two.js基本操作
今天介绍一个网络上并不常用的插件two.js,two.js是一款网页二维绘图软件,可以在指定区域内产生自设的各种动画效果 下载网址如下: https://two.js.org/#download 一: ...
- PeopleSoft FSCM Production Support 案例分析
PeopleSoft FSCM Production Support 案例分析 2010年的时候曾建言博客园开辟Oracle ERP模块供大家交流,博客园如约开辟Oracle ERP 模块,而我后来却 ...