【博学谷学习记录】超强总结，用心分享 |
您所在的位置：网站首页 › div设置左对齐 › 【博学谷学习记录】超强总结，用心分享 |
【博学谷学习记录】超强总结，用心分享
| 前言： 今天讲一下装饰类的CSS样式设置，内容有点杂，各取所需即可。 一、垂直对齐方式基线：浏览器文字类型元素排版中存在用于对其的基线（baseline），浏览器在处理行内和行内块标签按照文字解析，默认基线对齐。 属性名: vertical-align 属性值 效果 baseline 默认，基线对齐 top 顶部对齐 middle 中部对齐 bottom 底部对齐vertical-align 属性可被用于两种环境： 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片注意： vertical-align 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素；行内块与文字或者行内块与行内块对齐都用middle。二、光标类型属性名: cursor 属性值 效果 default 默认值，通常是箭头 pointer 小手效果，提示用户可以点击 text 工字型，提示用户可以选择文字 move 十字光标，提示用户可以移动三、边框圆角属性名: border-radius 常见取值：数字+px、百分比 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角。3.1 正圆盒子必须是正方形设置边框圆角为盒子宽高的一半 border-radius: 50% 3.2 胶囊盒子要求是长方形设置 border-radius: 盒子高度的一半 四、overflow溢出溢出部分：指的是盒子内容部分所超出盒子范围的区域。 场景：控制内容一处部分的显示效果，如：显示、隐藏、滚动条…… 属性值 效果 visible 默认值, 溢出部分可见 hidden 溢出部分隐藏 scroll 无论是否溢出, 都显示滚动条 auto 根据是否溢出, 自动显示或隐藏滚动条五、元素透明度属性名: opacity 属性值: 0~1之间的数字 1: 表示完全不透明 0: 表示完全透明注意点：opacity会让元素整体透明，包括里面的所有内容。  六、边框合并场景：让相邻表格边框进行合并，得到细线边框效果。 border-collapse: collapse注意： 一定要加给table标签：做细线表格。   七、用CSS画三角形设置一个盒子；盒子添加四个方向的border，颜色设置不同；将盒子宽高设为0，保留其中一个方向的border，其他方向颜色是transparent（透明色）。 八、链接伪类选择器场景：常用于选中超链接的不同状态。 语法 功能 a:link{} 选中a链接 未访问过 的状态 a:visited{} 选中a链接 访问之后 的状态 a:hover{} 选中 鼠标悬停 的状态 a:active{} 选中 鼠标按下 的状态注意点： 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写。记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑。 2. :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态。 九、过渡作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验。 属性名：transition 参数 取值 过渡的属性 all:所有能过渡的属性都过渡、具体属性名如: width:只有width过渡 过渡的时长 数字+s(秒)注意点： 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果；transition属性给需要过渡的元素本身加；transition属性设置在不同状态中，效果不同的：给默认状态设置，鼠标移入移出都有过渡效果；给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果。后记：本周的学习暂时告一段落，下周我们将对构造项目进行一个大致说明。 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |