嘉琦 - 博客园

2021年12月30日

摘要：属性：overflow 值作用 visible 默认，内容溢出部分可见 hidden 内容溢出部分不可见 scroll 内容有无溢出，都有滚动条 auto 有内容溢出，自动显示滚动条阅读全文

posted @ 2021-12-30 16:18 嘉琦阅读(230) 评论(0) 推荐(0)

摘要：属性：border-radius:数字+px；用途：修饰盒子圆角使用语法格式： 1. border-radius：20px ； /* 四个叫同时以半径20px圆角*/ 2. border-radius: 20px 30px /*左上角和右下角同时以半径20px圆角;右上角和左下角同时以半径30p 阅读全文

posted @ 2021-12-30 16:07 嘉琦阅读(177) 评论(0) 推荐(0)

CSS基础行内元素/行内块元素设置垂直对齐方式及常见使用案例

摘要： vertical-align 属性值效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐使用案例1：百度搜索框左边和右边底部没有对齐使用vertical-align：top;/vertical-align:bottom; 之后效果案例,html结阅读全文

posted @ 2021-12-30 15:31 嘉琦阅读(870) 评论(0) 推荐(0)

2021年12月29日

CSS基础水平居中案例

摘要： html结构 <body> <div class="father"> <div class="son"></div> </div> </body> CSS结构 <style> .father{ position: relative; width: 400px; height: 300px; back 阅读全文

posted @ 2021-12-29 22:06 嘉琦阅读(28) 评论(0) 推荐(0)

CSS基础定位相关属性的使用方法

摘要： 1.相对定位：position：relative；属性名：position 属性值：relative；特点：1.相对自己的位置移动 2.配合方位名词移动，如：top、left、right，bottom 3.相对定位，位置虽然移动了，但原来的位置还在，并未脱标应用场景： 1.配合绝对定位使用（子绝阅读全文

posted @ 2021-12-29 21:17 嘉琦阅读(92) 评论(0) 推荐(0)

CSS基础 BFC的使用方法

摘要： BFC的作用和创建1.html标签是BFC盒子2.浮动元素是BFC盒子3.行内块元素是BFC盒子4.overflow属性值不为visible，如：auto、hidden。。。作用：1.清除浮动； 2.解决塌陷注意：display:table也可以生成BFC的原因在于Table会默认生成一个匿名的ta 阅读全文

posted @ 2021-12-29 20:13 嘉琦阅读(77) 评论(0) 推荐(0)

CSS基础清除浮动

摘要： 1.单伪元素清除法；清除浮动 .clearfix::after{ content: '.'; display: block; clear: both; height: 0; /* 这两行代码是清除content里.的这个内容*/ visibility: hidden; } 清除浮动之前，两个盒子重叠阅读全文

posted @ 2021-12-29 19:52 嘉琦阅读(58) 评论(0) 推荐(0)

CSS基础实战案例模拟小米官方导航栏

摘要：效果图 html结构 <ul> <li><a href="#">Xiaomi手机</a></li> <li><a href="#">Redmi 手机</a></li> <li><a href="#">电视</a></li> <li><a href="#">笔记本</a></li> </ul> CSS 阅读全文

posted @ 2021-12-29 18:48 嘉琦阅读(145) 评论(0) 推荐(0)

CS基础 float 浮动的使用方法

摘要： html代码： <body> <div class='red'> </div> <div class='green'> </div> <div class='blue'> </div> </body>浮动特点： 1.使用浮动时会脱标，被脱标的物体会向上空飘去，不占用正常流的位置，此时用的是 .gr 阅读全文

posted @ 2021-12-29 16:38 嘉琦阅读(695) 评论(0) 推荐(0)

CSS基础结构伪类选择器 last-child、first-child和nth-of-type的使用方法

摘要：一.通过伪类选择器查找单个标签元素html结构 <div> <a herf='#'>导航1</a> <a herf='#'>导航2</a> <a herf='#'>导航3</a> </div> /* 匹配第一个子元素，并且为a标签 */ div a:first-child{} 注意：如果第一个元素不阅读全文

posted @ 2021-12-29 15:10 嘉琦阅读(563) 评论(0) 推荐(0)

嘉琦

公告