画三角形、模型、布局

韭菜小姐

已于 2022-07-04 14:58:26 修改

阅读量321

点赞数

分类专栏：每天一个知识点，丰富我的大前端文章标签：画三角形模型布局

于 2019-11-03 14:05:38 首次发布

本文链接：https://blog.csdn.net/weixin_44368573/article/details/101378680

版权

每天一个知识点，丰富我的大前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

font-family: serif;/互联网页面字体,由乔布斯发明/
利用border画三角形
当把一个div的宽高设为0，当四周的border值都设置时，重叠的部分会平半分，这
样就可以产生四个三角形，并且可以把其他边的颜色设置为color：transparent;/*颜色设置为透明值

 #triangle{
	height: 0px;
	width: 0px;
	border:100px solid black;
	border-top-color: #f40;
	border-left-color:#00FF77;
	border-right-color:transparent;
	border-bottom-color:transparent;
	}

line-height :单行文本的高度，一般通过单行文本的高度等于容器高度来达到垂直居中
em：相对单位 1em=1*当前的font-size值
text-decoration的属性line-through,underline,none
cursor/鼠标放上去显示的提示符/：help,pointer
border-radius/边框半径/

行级元素：内容决定元素所占位置，不可以通过css改变宽高display:inline
span strong em
块级元素:独占一行，可以修改宽高 display:block
div ul li ol a form address
行级块元素：并排排列，可以设置宽高 display:inline-block
img (一般设置图片的额宽高时只需要设置一个值就可以，另一个根据图片比例自动改变)
块级元素可以嵌套任何元素（除了p标签不能套块元素）
行级元素只能嵌套行级元素（a标签不能嵌套a标签）
只要是inline类型的都具有文本的特性，则当图片并排时会有默认4px的间隔

<img src="../images/1.jpg"/>
<img src="../images/1.jpg"/>
<img src="../images/1.jpg"/>
<img src="../images/1.jpg"/>

img{
	
	margin-left:-5px;
	width: 100px;
}

当然如果写代码时，不空行则也可以避免这个问题，但一般写代码时都会空行写
所以平时测试时使用margin-left:-4px;就可以解决，但要是上线时，会进行代码的压缩，包括删除大量的空行和空格，那这样的话图片就会陷进去。

可以通过css来自定义标签的属性，让标签初始化为你想要的样式
编程思想：可以先编写css功能，然后再分配功能给你的标签，这样的话就更好的实现多种功能的复用和组合，减少代码量。

body有一个默认的margin为8px;

层模型

position:
1.absolute:脱离文档流，不属于原来的层面，不占原来层级的位置，相对于最近的有定位的父级进行对位，如果没有找到就相对于文档定位。
2.relative:相对于自己原来的位置进行定位，不脱离文档流，占有原来层级位置
3.fixed:脱离文档流，相对于视口定位
4.static:静态的（有些浏览器已经不兼容了）
5.sticky:粘性定位，当没有滚动条是相当于relative，有滚动条时相当于fixed

一般参照物使用relative为父元素，占据原来位置，不脱离文档
让要定位的元素为absolute,相对于有定位的父级元素来定位

两栏布局

<body>
	<div class="right"></div>
	<div class="left"></div>
</body>

*{
	margin:0px;
	padding: 0px;
}
.right{
	width:100px;
	height: 100px;
	background-color: #fcc;
	right:0px;
	position: absolute;
	
}
.left{ 
	height: 100px;
	background-color: #338800;
	margin-right:100px;
}

经典的bfc

父子div中：

子元素的margin-top<=父元素的margin-top	不发生改变，还是保留父元素的位置，父元素的margin-top起作用
子元素的margin-top>父元素的margin-top	子元素和父元素一起改变，以大的（子元素）maring-top为标准
我们可以改变父级渲染规则为bfc(block format context)，解决了margin塌陷的问题
改变方式：
设置父元素的：overflow:hidden;/position:absolute;/float:left;

<body>
<div class="exdiv">
	<div class="content"></div>
</div>
</body>

*{
	margin:0px;
	padding: 0px;
}
.exdiv{
	width: 100px;
	height:100px;
	background-color:black;
	margin-left:500px;
	margin-top:300px;
	overflow: hidden;
	/*display: inline-block;
	float: left;*/
}
.content{
	width: 50px;
	height: 50px;
	background-color: green;
    margin-left:50px;
    margin-top:50px;
}

span元素之间的margin不共用
div元素之间的margin共用

浮动模型

浮动元素产生了的浮动流
块级元素看不到浮动元素，产生了bfc的元素和文本类属性（inline）元素以及文本都能看到浮动元素（站到他们的后面）
所以其他块元素要是想与前面的块元素并排，则需要变为bfc模式。
父级包住浮动元素方法：在浮动元素后面添加一个块元素设置clear属性为both;

伪元素是行级元素，位于任何一个元素的逻辑之前和之后，分别用after和before表示，在html中没有元素表示，只在css中作为一个元素可以修改任何样式。里面有个content的属性可以改变伪元素的内容，这样就帮助了我们解决清浮动的问题了，不用单独设置一个元素专门做清浮动
例：span::after{
content=“”;
}

清浮动

利用伪元素清浮动，使一个父级div可以包裹（撑开）浮动的子元素

<body>
<div id="wrapper">
	<div class="content">1</div>
	<div class="content">2</div>
	<div class="content">3</div>
</div>
</body>

*{
	margin:0px;
	padding: 0px;
}
#wrapper{
	border:1px solid black;
}
#wrapper::after{
	content: "";
	clear:both;/*只有是块级元素，clear才会生效，clear作用于块元素*/
	display: block;/*伪元素是行级元素，必须改为块元素，且清浮动*/
}
.content{
	width:100px;
	height: 100px;
	float: left;
	background-color: orange;
}

重点三件套：
#wrapper::after{
content: “”;
clear:both;/只有是块级元素，clear才会生效，clear作用于块元素/
display: block;/伪元素是行级元素，必须改为块元素，且清浮动/
}

还可以设置父级元素为position：absolute; float:left/right;
设置之后，默认从内部把元素自动变成inline-block，变成行间块模型就能识别浮动元素，父元素的大小就由内容撑开。
但这种方式的设定，可能还会引发新的问题。所以建议使用第一种，利用伪元素清浮动。

单行文本溢出的打点展示

p{
  width:300px;
 /* border:1px solid black;*/
  height: 20px;
  white-space: nowrap;/*实现文本不换行的功能*/
  overflow:hidden;/*超出容器的隐藏*/
  text-overflow: ellipsis;/*文本后用...表示*/
}

重点三件套：
white-space: nowrap;/实现文本不换行的功能/
overflow:hidden;/超出容器的隐藏/
text-overflow: ellipsis;/文本后用…表示/

多行文本截断展示
只做截断就可以了，让文本在容器中成整行整行展示（height的值是line-height的倍数）超出的部分overflow:hidden;

盒模型

div的可视大小：border+padding+content
padding中可以显示背景颜色和背景图片，但是文本不可以只能在content区。

对齐

一般情况下不管是文本与图片还是大小不一的文本与文本对齐都是底对齐。但当行级块元素（具有的高度大于文字的高度）中有文字时，标签外部的文本与内部的文本底对齐，而不是与整个行级元素的底对齐对。
可以设置这个属性改变对齐方式：vertical-align:1px/middle/top…

@规则

在css文件中
@import 模块化开发方式，用于引入一个 CSS 文件，除了 @charset 规则不会被引入，@import 可以引入另一个文件的全部内容。
用法：@import ‘reset.css’;
@charset 设置样式表的编码，用于提示 CSS 文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果。
@media /媒体查询/
@font-face /自定义字体/

title中的小图标，称为：favicon
这个图标主要显示在打开网页的标题和书签中
使用规则：要求图片的格式为.icon类型，且要放在网页的根目录下，使用link导入