前端,基础选择器,嵌套关系.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属性 盒子模型 ...
随机推荐
- GYM 101889E（dp）
dp[i][j][k]表示第i位填数字k时,与后面的相连模数为j时,后面的数字最小填多少. 测得我提心吊胆还以为复杂度高了,结果出来46ms还是cf评测姬强啊. #pragma comment(lin ...
- 洛谷1072（gcd的运用）
已知正整数a0,a1,b0,b1,设某未知正整数x满足: 1． x 和 a0 的最大公约数是 a1: 2． x 和 b0 的最小公倍数是b1. Hankson 的“逆问题”就是求出满足条件的正整数 ...
- how browser supports https
1. pre-installed certificate authorities 2. ssl/tls encription ssl/tls handshake flow: 1. exchange d ...
- DBAplus社群线上分享----Sharding-Sphere之Proxy初探
功能 Cobar Mycat Heisenberg Shark TDDL Sharding-JDBC 是否开源 开源 开源 开源 开源 部分开源 开源 架构模型 Proxy架构 Proxy架构 Pro ...
- C#中 添加 删除 查找Xml中子节点
//添加xml节点 private void AddXml(string image, string title) { XmlDocument xmlDoc = new X ...
- drupal6提示 Compilation failed: disallowed Unicode code point (>= 0xd800 && <= 0xdfff) at offset 9 on line 615
解决办法:将sites\all\modules\ctools\includes\cleanstring.inc文件中的61行改成62行这样子即可,如下图
- Linux下环境搭建（一）——java、tomcat配置
通过2个周末小憩的时间,终究是把linux环境下的jenkins+gitlab+jmeter框架给弄好了.jenkins的配置系列文章,可以翻看我以前的博文.此次,就将在linux下搭建环境的过程以博 ...
- Caused by: java.lang.NoClassDefFoundError: com/sun/tools/javac/util/List at
折腾了一下的时间,都没有找到解决的方案,在网上搜了一下答案都是让清理编译环境和重新打包之类的.就这样折腾一下,还没有解决问题.之所以会抛出找不到类的问题,需要排查你使用这个包的类是否存在,存在之后 查 ...
- Educational Codeforces Round 11 _D
http://codeforces.com/contest/660/problem/D 这个题据说是很老的题了 然而我现在才知道做法 用map跑了1953ms: 题目大意 给你n个点的坐标 求这些点能 ...
- CSS3与弹性盒布局
1.弹性盒布局对齐模式 1.1.弹性盒子 在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型,也就是设置 display 为 flex 代码如下: <!DOCTYPE html& ...