标签：opacity vertical solid text align 元素 height 对齐 border
元素和内容的居中方法
元素 : <标签名>内容</标签名>
标签 : <标签名>
内容 : 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 是设置单元格与单元格之间的距离
标签：opacity,vertical,solid,text,align,元素,height,对齐,border 来源： https://www.cnblogs.com/nomnom/p/16488833.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。