边框画三角形
<style>
*{
margin:0;padding:0;
}
.box{
border:50px solid darkcyan;
border-color: transparent transparent lightblue transparent;
width:0;
}
</style>
<div class="box"></div>
1) width宽度
min-width 最小宽度
max-width 最大宽度
\
2) height高度
min-height 最小高度
max-height 最大高度
border 边框的设置
- border-width:边框宽度
- border-style:边框样式
-
- solid 实现
- dashed 虚线
- dotted 点线
- border-color：边框颜色
- 合写：border：border-width border-style border-color
浮动
1、浮动的来历
- 正常页面流：
-
- 在css中，是存在流的概念的，正常情况下，页面总是由左至右，由上至下布局，我们把这种情况称作为正常页面流
- 但是，在很多情况下，正常页面流有很多效果实现不了，所以需要一些手段来破坏流，而浮动（float）就是破坏流的一种手段
- 浮动的来历：
-
- float设计的初始想法仅仅是为了做文字环绕图片
- 在目前开发中，很多的元素都是一个个的float堆叠起来的，但是这种布局及其容易崩溃
- 只要高度和宽度发生一点变化，页面都可能发生错乱
2、浮动
float属性：
-
- 左浮动（left）：让元素沿着容器左侧放置
- 右浮动（right）：让元素沿着容器右侧放置
- none：不浮动
3、浮动的特点
- 脱离正常文档流（不占位置）
- 左浮动，右浮动的方向针对的是父级
- 正常文档流中，宽度是可继承的，但是一旦浮动，宽度不能再继承父级的，而是由自身内容大小决定。
- 行内元素本来写宽、高是不起作用的，但是一旦设置浮动，设置宽、高也可以起作用。
5、清除浮动
- 浮动的概念：让元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是上一个浮动元素或者是上一个不浮动兄弟元素就停下来
- 高度塌陷：
-
- 浮动元素以后，脱离父级内容区域，父级没有内容撑开自身的高度
- 父级的兄弟元素是 按照父级的位置进行布局的，所以页面会乱掉
-
清除浮动：清除浮动不是不让元素浮动，而是清除浮动对父级带来的影响
-
清除浮动的方法：
- 给浮动元素的父级设置高度height（不推荐使用）缺点：很多情况下 高度都是不缺定的 所有不适用
- 以浮制浮，给浮动元素的父元素设置浮动，原理是开启BFC（不推荐使用）缺点：只有在父级需要浮动的时候，可以这么清除，否则父级的浮动会影响布局
- br清除浮动：在浮动元素的后边书写一个br。br中书写clear属性，值为both缺点：增加不必要的元素，不符合样式与结构相分离的要求
- clear清浮动法：给浮动元素的下边添加一个块元素，书写样式clear:both；缺点：增加额外的结构，不符合语义化标准
- after伪元素清浮动（推荐）可以给所有浮动元素的父级一个 clearFix的类名当一个元素需要清除浮动的时候 直接设置clearFix类名即可
- overflow：hidden；给父级设置，原理也是开启BFC（可以使用）优点：简单快捷；缺点：元素超出的时候，会隐藏超出部分
.clearFix:after {
/* 必须拥有content属性 内容为空 */
content: "";
/* 必须块标签才能清浮动 */
display: block;
/* 高度为0 不占用空间 */
height: 0;
/* 清除浮动 */
clear: both;
}
.clearFix {
/* //兼容ie */
*zoom: 1;
}
