前端,基础选择器,嵌套关系.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属性 盒子模型 ...
随机推荐
- socketserver+socket实现较为复杂的ftp，支持多用户在线
客户端(ftp_client.py) import socketserver,json,hashlib,os from pymongo import MongoClient ''' *****要点** ...
- 基于http的软件仓库
这是企业中常用的方法 比如一台服务器准备好了,公司必然要安装一些应用 这时可以用这种方法批量安装应用 运行一条命令,服务器就会自己去连接软件仓库,去下载来安装. [root@webmaster htm ...
- zh-cn、en-us、zh-tw等表示语言(文化)代码与国家地区对照表(最全的各国地区对照表)
af 公用荷兰语 af-ZA 公用荷兰语 - 南非 sq 阿尔巴尼亚 sq-AL 阿尔巴尼亚 -阿尔巴尼亚 ar 阿拉伯语 ar-DZ 阿拉伯语 -阿尔及利亚 ar-BH 阿拉伯语 -巴林 ar-EG ...
- SDIO学习
https://baijiahao.baidu.com/s?id=1561100856106707&wfr=spider&for=pc http://www.eepw.com.cn/a ...
- Redis基础理论
一.概述 二.数据类型 STRING LIST SET HASH ZSET 三.数据结构 字典 跳跃表 四.使用场景 计数器 缓存 查找表 消息队列 会话缓存 分布式锁实现 其它 五.Redis 与 ...
- opencart 安装
1:安装 php5 apache2 mysql 2:下载opencart wget https://github.com/opencart/opencart/archive/master.zi ...
- python学习day13
目录 JavaScript Dom jQuery JavaScript JavaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平 ...
- C/C++程序员应聘常见面试题深入剖析(1)
摘自:http://blog.csdn.net/zhoudengqing 1.引言 本文的写作目的并不在于提供C/C++程序员求职面试指导,而旨在从技术上分析面试题的内涵.文中的大多数面试题来自各大论 ...
- arcengine,c# 二次开发
plication.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); ESRI.ArcGIS.Ru ...
- 【R语言进行数据挖掘】决策树和随机森林
1.使用包party建立决策树 这一节学习使用包party里面的函数ctree()为数据集iris建立一个决策树.属性Sepal.Length(萼片长度).Sepal.Width(萼片宽度).Peta ...