![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
向阳的人生
编程菜鸟,java从0开始,网上自学,将个人所学整理到博客;
人无再少年!
展开
-
CSS 绝对定位和固定定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>绝对定位和固定定位</title> <style> body{ height: 1000px; } /*绝对定位 1.在没有父级元素前提下,相对于浏览器定位 2原创 2020-12-17 14:04:32 · 319 阅读 · 0 评论 -
CSS相对定位
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>相对定位</title> <link rel="stylesheet" href="css/style.css"></head><body><div class="father"> <div cla原创 2020-12-17 11:25:04 · 135 阅读 · 0 评论 -
四种解决父级边框塌陷方法
问题引入当我们使用浮动时,可能出现元素超出父级元素的情况如图可以看到父级边框出现了塌陷情况解决方案一:在父级属性设置高度(不推荐).father{ border: 1px solid black; height: 10000px;}解决方案二:添加一个空div块 <div class="clear"></div> .clear{ clear: both; margin: 0; padding: 0;}解决方案三:父级原创 2020-12-16 19:43:11 · 2413 阅读 · 0 评论 -
CSS浮动
浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动练习</title> <style> /*inline: 行内元素(非独占行) block:块元素(独占行) inline-block:行块元素(可联动的块元素) none:不原创 2020-12-16 19:18:29 · 78 阅读 · 0 评论 -
CSS圆角边框和阴影
圆角边框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圆角边框</title> <style> div{ height: 50px; width: 100px; border: 3px solid red;原创 2020-12-16 16:23:35 · 588 阅读 · 0 评论 -
CSS盒子模型 边框的应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>边框</title> <style> #box{ border: 1px solid red; width: 300px; } form{ background-color: blu原创 2020-12-15 20:45:40 · 100 阅读 · 0 评论 -
CSS基本美化网页元素
字体样式实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>字体样式</title> <style> body{ font-family: 楷体; font-size: 20px; } .test{原创 2020-12-15 20:38:46 · 538 阅读 · 0 评论 -
CSS 属性选择器(重要)
格式:标签[属性选择]{}绝对相等属性(=)实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .Test a{ float: left; display: block; .原创 2020-12-14 19:38:56 · 146 阅读 · 0 评论 -
CSS 四种层次选择器
实例结构图后代选择器格式:元素 标签{}特点作用域为元素所有子代标签实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>层次选择器</title> <style> body p{ background: red; } </sty原创 2020-12-14 14:16:00 · 1497 阅读 · 0 评论 -
CSS 三种基本选择器
标签选择器格式 :标签{}实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三种基本选择器</title> <!--标签选择器--> <style> h1{ color: green; } </style>原创 2020-12-14 10:53:41 · 553 阅读 · 0 评论