css企业开发经验，习惯盒模型，层模型

  • 文本对齐方式text-align
  • 单行文本所占高度 行高 line-height
  • 文本首行缩进 text-indent
  • text-decoration
  • 伪类选择器
  • 标签分类
  • 四张图片排成一排
  • 先定义功能后选配
  • 标签选择器功能：初始化标签
  • 通配符选择器功能：初始化所有标签
  • 盒子模型
  • 一个盒子在另一个盒子居中
  • 盒模型计算
  • 远视图
  • 绝对定位absolute
  • 相对定位relative
  • 定位
  • 固定定位fixed(广告定位)
  • 用定位做水平垂直居中

文本对齐方式text-align

    <!-- 文本对齐方式 text-align --><!-- <div>31省区市新增确诊病例96例 本土病例81例;江苏新增38例本土确诊病例 其中扬州36例;东京奥运中国军团的“封神之作”;这场战争越来越惨烈 中美这两天都有动作！;张勇阿里回应"女员工被侵害":震惊气愤羞愧</div> --><!-- 文本对齐方式 text-align -->

/* 文本对齐方式 text-align*/
/* 文本默认正常的展示方式是：左对齐 */
/* 水平的展示方式：默认text-align:left; */
/* right:居右；center:居中显示 */
/*
div{border:1px solid #000;text-align:right;
}
*/
/* 文本对齐方式 text-align */

单行文本所占高度 行高 line-height

    <!-- 单行文本所占高度 行高 line-height --><!-- <div>31省区市新增确诊病例96例 本土病例81例;江苏新增38例本土确诊病例 其中扬州36例;东京奥运中国军团的“封神之作”;这场战争越来越惨烈 中美这两天都有动作！;张勇阿里回应"女员工被侵害":震惊气愤羞愧</div> --><!-- 单行文本所占高度 行高 line-height --><!-- 单行文本利用text-align水平居中；line-height垂直居中 --><!-- <div>31省区市新增确诊病例96例 </div> --><!-- 单行文本利用text-align水平居中；line-height垂直居中 -->

/* 单行文本所占高度 行高 line-height*/
/* 默认的字体的高度是16px；因为font-size用于设置字体高度；未设置，默认是16px */
/* 文字现在呈多行显示，每一行文字所占的高度并不等于文字本身的高度：叫文本的所占高度，即文本的行高：line-height */
/* 若line-height:16px;每一行之间便一点空隙都不留，字挨着字 */
/*
div{border:1px solid #000;height:200px;line-height:16px;
}
*/
/* 单行文本所占高度 行高 line-height *//* 单行文本利用text-align水平居中；line-height垂直居中 */
/* 水平居中：text-align:center; */
/* 文本所占高度，就是单行的文本占的高度，行高； */
/* 若单行文本的所占高度 == 容器的高度；便垂直居中了 */
/* 还有一种就是加padding;line-height = height比较通用 */
/*
div{text-align:center;border:1px solid #000;height:200px;line-height:200px;
}
*/
/* 单行文本利用text-align水平居中；line-height垂直居中 */

文本首行缩进 text-indent

    <!-- 文本首行缩进 text-indent --><!-- <div>31省区市新增确诊病例96例 本土病例81例;江苏新增38例本土确诊病例 其中扬州36例;东京奥运中国军团的“封神之作”;这场战争越来越惨烈 中美这两天都有动作！;张勇阿里回应"女员工被侵害":震惊气愤羞愧</div> --><!-- 文本首行缩进 text-indent -->
/* 文本首行缩进 text-indent */
/* 文本首行缩进连个字符 */
/* （1）在前面加空格文本&nbsp;：不可以，不确定几个；肯定对齐不了；其次空格在每一个操作系统或者在每一个输入法的不同的全角和半角的展示形式都是不一样的；那空格是非常不合理的 */
/* (2)text-indent:首行缩进 */
/* 单位是给一个衡量标准的一个东西，分两种（1）绝对单位；（2）相对单位 */
/* 绝对单位：m cm mm nm um.... */
/* px 一般是对于屏幕来说；一个px只能展示一个颜色；一个屏幕上有很多种颜色，它是由无数个非常小的像素格组成的 */
/* 屏幕清晰与否也是看像素点多不多；屏幕的分辨率就是在说像素； */
/* 屏幕分辨率：每英寸所能容纳的垂直像素点数；即像素点越小，越清晰；像素点越大，分辨率越低 */
/* 所以像素应该是相对单位 */
/* em也是相对单位：1em  = 1 * 该元素/该标签的font-size */
/* 在这里：1em = 1 * 16px = 16px; */
/* 互联网上一些通用字体给我们的方便就是，让字体的高等于字体的宽，所以缩进2em，就是缩进两个字体的高度，而高度=宽度，即缩进两个字体的宽度 */
/* 有一些题目中：文字的行高是1.2倍行高：没有说单位，这里应该是em;line-height:1.2em */
/* 单位em; */
/*
div{text-indent:2em;
}
*/
/* 文本首行缩进 text-indent */

text-decoration

    <!-- css属性 text-decoration  --><!-- del标签自带text-decoration:line-through  --><!-- <del>原价50元</del><span>原价50元</span> --><!-- css属性 text-decoration --><!-- 利用text-decoration,cursor，仿造a标签 --><!-- <a href="http://www.baidu.com">www.baidu.com</a><span>www.baidu.com</span>--><!-- 利用text-decoration,cursor，仿造a标签 -->

/* css属性 text-decoration */
/* text-decoration: text-decoration-line(文本修饰的位置，line-through underline overline ...), text-decoration-color（文本修饰的颜色）, text-decoration-style(文本修饰的样式，solid dotted dashed wavy[波浪线】),text-decoration-thickness（文本修饰线的粗细） */
/* 中划线：line-through;
下划线：underline;
上划线：overline
none : 这个元素没有线
*/
/*
span{text-decoration:line-through;
}
*/
/* 设置del没有修饰线 */
/*
del{text-decoration:none;
}
*/
/* css属性 text-decoration *//* 利用text-decoration,cursor，仿造a标签 */
/* 加下划线 */
/* cursor:当鼠标移入时，鼠标的样式
pointer 小手
help 问号
resize.......好多
*/
/*
span{text-decoration:underline;color: rgb(85, 26, 139);cursor:pointer;
}
*/
/* 利用text-decoration,cursor，仿造a标签 */

伪类选择器

    <!-- 伪类选择器 全权重同标签和属性选择器，为10--><!-- <a href="http://www.baidu.com">www.baidu.com</a> --><!-- 伪类选择器 -->

/* 伪类选择器 */
/* 当鼠标移入该标签领域内，加上css；移走，去掉css */
/*
a:hover{background-color: red;
}
*/
/* 伪类选择器 */

标签分类

    <!-- 标签分类   依旧是css的特性 属性display--><!-- 1.行级元素  inline 内联（1）内容决定元素大小，即内容决定元素所占位置（2）不可以通过css改变宽高span strong a em del2.块级元素  block （1）独占一行（2）可以通过css改变宽高div p ul li ol form address3.行级块元素  inline-block（1）内容决定大小（2）可以通过css改变宽高img--><!-- 标签分类 -->

/* 标签分类   依旧是css的特性 属性display */
/* span里面有display:inline;
div里面：display:block;
img里面：display:inline-block; */
/* 我们便可以通过更改display来改变元素的特点 */
/*
span{display:inline;
}div{display:block;
}
img{display:inline-block;
}
*/
/* 标签分类   依旧是css的特性 属性display */

四张图片排成一排

    <!-- 四张图片排成一排 --><!-- bug:图片之间有空隙 --><!-- 凡是带有inline的（inline-block）的元素，都带有文字特性，文字特性：文字之间将会被被分割 --><!--     <img src="test.png" alt="" width="200px"><img src="test.png" alt="" width="200px"><img src="test.png" alt="" width="200px"><img src="test.png" alt="" width="200px"> --><!-- 正常解决办法把空格去了就可以了 --><!-- <img src="test.png" alt="" width="200px"><img src="test.png" alt="" width="200px"><img src="test.png" alt="" width="200px"><img src="test.png" alt="" width="200px"> --><!-- 四张图片排成一排 -->

/* 四张图片排成一排 */
/* 有些人通常这么解决,设置左间距为负值，她便会往左陷了 */
/* 但是我们传送给服务器的时候通常会压缩代码，分两个步骤：
（1）系统会将img等这样的一个单词用一个字母来代替-》文件缩小了；
（2）去空格去回车的压缩；文件缩小了，用户从服务器下载的时候更快了； */
/* 即文件传送到服务器，你文件中的一些空格回车就会自动去掉，然而又使用了margin-left往左硬陷，他就过了，不准了 */
/*
img{margin-left:-6px;
}
*/
/* 四张图片排成一排 */

先定义功能后选配

    <!-- 企业开发经验，先定义功能，在写结构，即先写css --><!-- 先定义功能，后选配 --><!-- <div class="red size3"></div><div class="green size2"></div>--><!-- 企业开发经验，先定义功能，在写结构，即先写css -->

/* 企业开发经验，先定义功能，在写结构，即先写css */
/* 三种颜色，三种尺寸，组合到一起便是很多种 */
/* 这种手法还有一个好处：你定义好的功能，其他人也可以用 */
/* 可以把自己写好的功能封装起来放到文件里去，以便后续开发使用 */
/*
.red{background-color: red;
}
.green{background-color: green;
}
.gray{background-color: gray;
}
.size1{width:100px;height:100px;
}
.size2{width:200px;height:200px;
}
.size3{width:300px;height:300px;
} */
/* 企业开发经验，先定义功能，在写结构，即先写css */

标签选择器功能：初始化标签

    <!-- 标签选择器最重要的作用：初始化标签 --><!--     <em>em字体加红，不斜体</em><ul><li>1</li><li>2</li><li>3</li></ul> --><!-- 标签选择器最重要的作用：初始化标签 -->

/* 标签选择器最重要的作用：初始化标签 */
/* 自定义的功能 自定义标签，让标签出生的时候的样式便是我们设计好的 */
/* 定义好em的初始样式之后，至此之后所有的em标签都是这个样式 即变红 */
/*
em{font-style:normal;color:#c00;
}*/
/* 其实有很多标签都需要初始化，因为有好多标签所携带的样式，并不是我们想要的 */
/* a标签的下划线去掉，字体颜色改变 */
/*
a{text-decoration: none;color:#424242;
}*/
/* 将ul的大圆点去掉  去掉自带的间隔*/
/*
ul{list-style:none;padding:0px;margin:0px;
}*/
/* 标签选择器最重要的作用：初始化标签 */

通配符选择器功能：初始化所有标签

/* 通配符选择器 权重是0 */
/* 好处：初始化所有标签，因为权重是0，后续用户想自定义，随便一个选择器就可以更改，没有影响 */
/* 基本所有标签都自带间隔即padding和margin */
/* 使用通配符选择器，初始化所有标签，去掉他们的内边距和外边距 */
/* body有一个天生的margin:8px  */
/*
*{padding:0px;margin:0px;
}*/
/* 通配符选择器 */

盒子模型

    <!-- 盒子模型 --><!-- 盒子模型是针对于html每一个元素的，每一个元素都符合盒子模型的语法特点 --><!-- 盒子的三大部分：盒子壁（border) 内边距(padding) 盒子内容(width+height) --><!-- 盒子模型 = 盒子的三大部分 + 外边距(margin);即margin + border + padding + content(width + height) --><!-- <div>盒子内容</div> --><!-- 盒子模型 -->

/* 盒子模型 */
/* margin:外边距；border:边框即盒子壁；padding:内边距；content=(width+height)盒子内容 */
/*
div{width:100px;height:100px;background-color: red;border:10px solid #000;padding:10px;margin:100px;
}*/
/* 盒子模型 */

一个盒子在另一个盒子居中

    <!-- 一个盒子在另一个盒子居中 --><!--     <div class="wrapper"><div class="content"></div></div> --><!-- 一个盒子在另一个盒子居中 -->
/* 一个盒子在另一个盒子居中 */
/* 即让里面的盒子和外面的盒子一样大，里面的而盒子充当外面盒子的内容去，外面盒子四周加padding即可 */
/* padding复合属性：padding:padding-top padding-right padding-bottom padding-left */
/*
padding写一个值代表4个值，即四周padding内边距相同；
写俩个值也同样是代表四个值：第一个值代表上下，第二个值代表左右；
写三个值：第一个值代表top，第二个值代表左右,第三个值代表bottom；三个值的时候固定左右相等，因为作为一个盒子来说，左右等距的情况最多；
四个值：top right bottom left  顺时针margin，border-width同padding也是复合属性;
*/
/*
.wrapper{width:100px;height:100px;background-color: red;padding:50px;border:10px solid green;
}
.content{width:100px;height:100px;background-color: #000;
}*/
/* 一个盒子在另一个盒子居中 */

盒模型计算

    <!-- 盒模型的计算问题 --><!-- <div></div> --><!-- 盒模型的计算问题 -->

/* 盒模型的计算问题 */
/* 求盒子可视区的宽高 margin不算盒子；外边距他是盒模型的*/
/*
realWidth = border-width-left + padding-left + width + padding-right + border-width-right;
10px + 20px + 100px +20px +10px = 160px;
realHeight = border-width-top + padding-top + height + padding-bottom + border-width-bottom;
10px + 10px + 100px + 30px + 10px = 160px;
*/
/*
div{width:100px;height:100px;background-color: red;border:10px solid #000;padding:10px 20px 30px;margin:10px 20px;
}*/
/* 盒模型的计算问题 */

远视图

    <!-- 远视图 --><!-- 四层盒子 wrapper>box>content>content1 --><!--     <div class="wrapper"><div class="box"><div class="content"><div class="content1"></div></div></div></div> --><!-- 远视图 -->

/* 远视图 */
/* 关键点：每一个块都在他父级的中间;让他的父级和他同宽高，加父级四周padding；padding会用父级的被禁颜色填充 */
/* 即用自身padding包裹内容区 先写最里层；之后会涉及到盒模型的计算问题*/
/*
.content1{width:10px;height:10px;background-color: #fff;
}
.content{width:10px;height:10px;background-color: #0f0;padding:10px;
}
*/
/* box的宽和高应该等于content可视区的宽高 */
/* boxwidth = contentwidth + contentpaddingleft +  contentpaddingright = 10 + 20 = 30
boxheight = contentheight + contentpaddingtop +  contentpaddingbottom = 10 + 20 = 30 */
/*
.box{width:30px;height:30px;padding:10px;background-color: #fff;
}*/
/* 计算方式同上 就是加了两边的padding*/
/*
.wrapper{width:50px;height:50px;padding:10px;background-color: #0f0;
}*/
/* 远视图 */

绝对定位absolute

    <!-- 绝对定位absolute --><!-- <div class="test"></div> --><!-- 绝对定位脱离原来位置进行定位 --><!--     <div class="demo"></div><div class="box"></div> --><!-- 绝对定位absolute -->

/* 绝对定位absolute */
/* 定位还要配合top（上边线距上） left（左边线距左）;只和position配合 */
/* right（右边线距右） bottom（下边线距下） */
/*
.test{position:absolute;left:100px;top:100px;width:100px;height:100px;background-color: red;
}*//* 绝对定位脱离原来位置进行定位 *//* 下面的box窜上去了 *//* 当一个元素成了绝对定位元素的时候，他就脱离了原来的层，跑到上一个层上面去了，所以在原先的层他的那一块就真空了，别人就可以上去了 */
/*.demo{width:100px;height:100px;background-color: red;position:absolute;opacity: 0.5;
}.box{width:150px;height:150px;background-color: green;;
}
*/
/* 绝对定位absolute */

相对定位relative

    <!-- 相对定位relative --><!--     <div class="demo"></div><div class="box"></div> --><!-- 当有其他元素时 --><!--     <div class="demo"></div><div class="box"></div> --><!-- 相对定位relative  -->

/* 相对定位relative  */
/*
.demo{position:relative;top:100px;left:100px;width:100px;height:100px;background-color: red;
}*//* 当有其他元素时 */
/* 还是分层了，ralative保留原来位置进行定位，也去另一个层面了，但是原来占据的地方不给 */
/*
.demo{width:100px;height:100px;background-color: red;position:ralative;opacity: 0.5;
}.box{width:150px;height:150px;background-color: green;;
}*/
/* 相对定位relative  */

定位

    <!-- 定位 --><!--     <div class="wrapper"><div class="content"><div class="box"></div></div></div> --><!-- 定位 -->

/* 定位 */
/* absolute定位相对于最近的有定位的父级进行定位，若没有有定位的父级，则相对于文档进行定位 */
/* relative是相对于自己原来出生的位置进行定位的 */
/* 定位的话要找参照物，没有参照物的话，是不精准，不可控的， */
/* 一般用relative（保留原来位置进行定位，对后续元素无影响）作为参照物，用absolute(可以随意的更换自己的参照物，定位更加灵活）进行定位 */
/*
.wrapper{position:relative;margin-left:100px;width:200px;height:200px;background-color: orange;
}.content{position:relative;width:100px;height:100px;background-color: #000;margin-left:100px;
}
.box{position:absolute;left:50px;width:50px;height:50px;background-color: yellow;
}*/
/* 定位 */

固定定位fixed(广告定位)

    <!-- position:fixed  --><!-- <div>增强。。。。的药物</div> --><!-- position:fixed -->

/* position:fixed */
/* 和absolute差不多 广告定位*/
/* 无论滚动条，页面怎么动，他都不动 */
/* 固定定位 */
/*
div{position:fixed;left:0px;top:300px;width:50px;height:200px;background-color: red;color:#fff;
}
*/
/* position:fixed */

用定位做水平垂直居中

    <!-- 用定位做水平垂直居中 --><!-- <div></div> --><!-- 用定位做水平垂直居中 -->

* 用定位做水平垂直居中 */
/* 运用margin;因为定位使用left top居中的是左顶点；使用margin让中心点居中：正好是容器宽高的一半 */
/* 也可以使用计算函数：left:calc(50% - 50px) */
/*
div{width:100px;height:100px;background-color:red;position:absolute;left:50%;top:50%;margin-top:-50px;margin-left:-50px;
}*/
/* 用定位做水平垂直居中 */

5.css企业开发经验，习惯盒模型，层模型相关推荐

  1. Django 2.1.3 模型层 模型

    模型 1. 快速上手 2. 使用模型 3. 字段 3.1 字段类型 3.2 字段选项 3.3 自动设置主键 3.4 备注名 3.5 关联关系 3.5.1 多对一 3.5.2 多对多 多对多关系中额外字 ...

  2. CSS→代码语法、优先级、选择器、权值、字体文本、颜色、长度值、块状内联元素、盒模型、布局模型→层模型绝对相对定位、div排列、水平居中

    CSS全称为"层叠样式表 (Cascading Style Sheets)" 绝圣弃智,民利百倍: 绝仁弃义,民复孝慈: 绝巧弃利,盗贼无有. 此三者,以为文不足,故令有所属,见素 ...

  3. Django学习日志三：模型层

    Django学习日志三:模型层1 日志一我们学习了Django的配置,详见: Django学习日志一Django的配置 日志二我们学习了创建第一个django项目,详见: Django学习日志二--创 ...

  4. Django框架——模型层单表操作、模型层多表操作、模型层常用和非常用字段和参数、模型层进阶

    文章目录 1 模型层-单表操作 一 ORM简介 二 单表操作 2.1 创建表 1 创建模型 2 更多字段 3 更多参数 4 settings配置 5 增加,删除字段 2.2 添加表纪录 2.3 查询表 ...

  5. week11 day7 模型层

    week11 day7 模型层 模型层 一.django测试环境的搭建 二.单表查询关键字(精准查找) 必知必会13条 三.神奇的双下划线查询(范围查询) 四.图书管理系统的表设计 五.外键字段的增删 ...

  6. web前端——html基础笔记 NO.12｛css布局模型（流动，浮动，层模型）｝

    css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又 ...

  7. css的布局模型(三)—层模型

    2019独角兽企业重金招聘Python工程师标准>>> 三.层模型 什么是层模型?层模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作. CS ...

  8. CSS基础语法和盒模型

    CSS基础语法和盒模型 CSS简介 Cascading Style Sheet 层叠样式表 用于给HTML标签添加样式 CSS3是CSS的最新版本 增加了大量的样式/动画/3D特效以及移动端特性 前端 ...

  9. css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性

    所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...

  10. css学习笔记（三）——布局模型

    布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末 ...

最新文章

  1. Pandas获取数据列名称的列表（list）:（column list）
  2. IT人的十八般武艺-序言
  3. python for in list
  4. linux 核显驱动程序,支持下代核显 Intel放出Linux图形驱动
  5. 判断是否是日期格式_Java8新特性之新世间与日期
  6. OpenCV/CUDA/Qt 环境配置小结
  7. php 计算上个月,如何使用PHP计算上一个月的今天
  8. 17.卷1(套接字联网API)--- ioctl 操作
  9. 玩转CAD格式，CAD转PDF，CAD转DWF，只需四个步骤高效完成
  10. Python基础学习--基于尚硅谷python教学视频
  11. plecs使用C-Script模块建立PI传递函数模型
  12. 游程编码用matlab实现代码_二值图像游程编码算法的Matlab实现 -
  13. 2021-10-11 全国大学生软件测试大赛赛前学习参考资料
  14. VS无法定位程序输入点于动态链接库
  15. 解析 FBX 模型文件作为 Direct3D 的渲染模型
  16. 多核芯片间的核间通信IPC机制
  17. 项目管理/思维技术实战专家陈永生
  18. 正则表达式前端使用手册
  19. SRS Audio Sandbox没有声音怎么办
  20. CCS2020论文泛读记录

热门文章

  1. java 之美_Java并发编程之美 PDF 下载
  2. MySQL 入门常用命令大全
  3. html连接sql数据库详解,HTML5 Web SQL数据库使用详解
  4. html 5 本地数据库（二）-- Web Sql Database核心方法openDatabase、transaction、executeSql 详解
  5. 程序员计算器 android6,程序员计算器
  6. ssh工作流程及原理
  7. java面向对象传播智客,传智播客java培训 java基础之javabean
  8. vs各个版本的编译器号
  9. java读取摄像头视屏流,Java 摄像头视频获取
  10. oracle分析函数sum() over()