元素和内容的居中方法
元素 : <标签名>内容</标签名>
标签 : <标签名>
内容 : xxx
text-align 水平居中：文本，行内元素，行内块元素
margin: 0 auto 水平居中：块元素
line-height 垂直居中：单行文本 img
vertical-align 垂直对齐（不是居中）: 行内 行内块
代码
<style>
.main {
text-align: center;
}
/* marign */
.container {
width: 300px;
height: 100px;
margin: 0 auto;
}
.head {
width: 400px;
height: 50px;
line-height: 50px;
}
</style>
</head>
<body>
<!--
一:
text-align(文本，行内元素，行内块元素)
如果要让以上内容实现居中，给他们的父元素(块)设置 text-align属性
-->
<div class="main">hello world</div>
<div class="main">
<span>span标记</span>
</div>
<div class="main">
<img src="./img/logo.png" width="100" alt="" />
</div>
<div class="main">
<input type="text" />
</div>
<hr />
<!-- --------------------------------------------------- -->
<!-- margin:0 auto
二：块元素水平居中，直接给当前元素设置属性
-->
<div class="container"></div>
<!-- 三：垂直居中
line-height 单行文本 -->
<div class="head">我是头部页面</div>
三角形
宽高都设置为0，设置border的宽度，样式为实线，其余三边的颜色为透明
<style>
.main {
width: 0px;
height: 0;
border-left: 40px solid red;
border-top: 40px solid;
border-bottom: 40px solid blue;
border-right: 40px solid green;
}
.box {
width: 0;
height: 0;
border-left: 60px solid red;
border-bottom: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid transparent;
}
</style>
</head>
<body>
<div class="main"></div>
<div class="box"></div>
</body>
阴影
-
元素添加阴影： box-shaodw：水平 垂直 模糊值 阴影尺寸 颜色
.circle:hover{
box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.3);
}
-
文字添加阴影：text-shaodw
text-shadow:10px 10px 5px rgba(0, 0, 0, 0.3)
vertical-align
垂直对齐方式
基线:浏览器文字类型元素排版中存在用于对齐的基线
作用： 解决行内/行内块元素垂直对齐问题
项目中解决得问题:
-
图片和文字得垂直对齐
-
文本框和按钮无法对齐问题
-
input和img无法对齐问题
-
div中得文本框，文本框无法贴顶得问题
-
div不设置高度由img标签撑开，img标签下面会存在额外间隙问题
-
使用line-height让img标签垂直居中
<div class="box">
<img src="./img/ewm.png" alt="" border="1" />
浏览器文字类型元素排版中存在用于对齐的基线
</div>
<!-- 1：文本框和按钮无法对齐问题 -->
<div class="mian"><input type="text" /> <button>按钮</button></div>
<!-- 2：input和img无法对齐问题 -->
<div class="one">
<img src="./img/ewm.png" border="1" alt="" />
<input type="text" />
</div>
<!-- 3：div中得文本框，文本框无法贴顶得问题 -->
<div class="two">
<input type="text" />
</div>
<!-- 4:div不设置高度由img标签撑开，img标签下面会存在额外间隙问题 -->
<div class="three">
<img src="./img/ewm.png" alt="" />
</div>
<!-- 5:使用line-height让img标签垂直居中 -->
<div class="four">
<img src="./img/ewm.png" alt="" />
</div>
字体图标
iconmoon.io 国外的
（pink老师教程在p255）
查找图标—-> 把图标添加入库—>点购物车–>下载代码
光标类型
设置鼠标光标在元素上显示的样式
cursor
default 默认值，通常是箭头
pointer 小手效果，提示用户可以点击
text 工字型，提示用户可以选择文字
move 十字光标，提示用户可以移动
边框圆角
让盒子四个角变得圆
border-radius: （数字+px）或者 百分比；
/* 从左上角开始赋值，然后顺时针赋值，没有赋值的看对角 */
-
正圆：1：盒子必须是正方形
2：设置边框圆角为盒子宽高的一半 border-radius:50%
-
胶囊按钮： 1.盒子是长方形
2.设置border-radius:盒子高度的一半
overflow溢出部分显示效果
溢出部分：盒子内容部分 所超出盒子范围的区域
场景：控制内容溢出部分的显示效果: 如：显示，隐藏，滚动条… overflow
visible 默认值，溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出，都显示滚动条
auto 根据是否溢出，自动显示或隐藏滚动条
元素隐藏及显示
让元素本身在屏幕中不可见， 鼠标：hover之后元素隐藏
两者都会创建元素，不会销毁
display:none 在网页中不占位置
visibility:hidden 在网页中占位置
开发中经常使用display属性完成元素的显示隐藏
display:none（隐藏） display：block(显示)
透明度opacity
场景 : 让某元素整体(包括内容)一起变透明
opacity 会让元素整体透明，包括里面的内容，如：文字 子元素…
opacity：0-1之间的数字
1 完全不透明
0 完全透明
单元格边框合并 collapse;
border-collapse: collapse;
和 table 自带属性 cellspacing 的区别：collapse是将两个边框合并为一个
cellspacing 是设置单元格与单元格之间的距离
原创文章，作者：jamestackk，如若转载，请注明出处：https://blog.ytso.com/275031.html