随笔分类 -  CSS

1 2 下一页
CSS学习笔记(一)-25.定位
摘要：一、为什么需要定位？ 问题1：某元素可以自由在一个盒子内部移动位置，并压住其他盒子。 问题2：当滚动页面时，会发现有些盒子固定在屏幕中某个位置。 以前的标准流和浮动都无法实现上面2个问题。所以需要引入定位。 1.浮动盒子可以让多个块级盒子一行显示且中间没有缝隙，常用于横向排列盒子。 2.定位可以让盒 阅读全文
posted @ 2021-07-28 18:05 kaer_invoker 阅读(93) 评论(0) 推荐(0)
CSS学习笔记(一)-22.CSS页面设计的思路和原则
摘要：一、CSS遵循以下顺序： 1.布局定位属性：display/position/float/clear/visibility/overflow(display第一个写） 2.自身属性： width/height/margin/padding/border/background 3.文本属性：color 阅读全文
posted @ 2021-07-14 18:07 kaer_invoker 阅读(222) 评论(0) 推荐(0)
CSS学习笔记(一)-21.清除浮动
摘要：场景：前面使用浮动的场景前提都是父盒子的高度是确定的，但是实际情况父元素的高度是动态的，根据子盒子的排列高度来展示父盒子的高度。如果不设置父元素的高度。内部放置子盒子，会出现问题，就是父元素高度变成0.子盒子悬浮在父盒子上边的下方。效果如下： 1 <!-- 2 * @Author: invoker 阅读全文
posted @ 2021-07-14 09:22 kaer_invoker 阅读(60) 评论(0) 推荐(0)
CSS学习笔记(一)-20.常见网页布局
摘要：布局1： 布局2： 阅读全文
posted @ 2021-07-13 22:46 kaer_invoker 阅读(47) 评论(0) 推荐(0)
CSS学习笔记(一)-19.浮动元素的常见使用：和标准流的父级搭配使用
摘要：网页布局一般原则： 1.先用标准流的父级元素排列上下位置，然后内部子元素在采用浮动排列左右位置。 浮动布局1： 参照： 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07 阅读全文
posted @ 2021-07-13 22:01 kaer_invoker 阅读(90) 评论(0) 推荐(0)
CSS学习笔记(一)-18.浮动特性
摘要：浮动特性： 1.浮动元素脱离标准流。 由于box是浮动的，所以飘起来了。而box2就占用了box原来的位置。 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 2 阅读全文
posted @ 2021-07-13 21:33 kaer_invoker 阅读(52) 评论(0) 推荐(0)
CSS学习笔记(一)-17.浮动
摘要：浮动： 一、网页布局分为三种方式： 网页布局就是用CSS来拜访盒子。 1.标准流（普通流/文档流） 2.浮动 为什么要浮动？ 1.让多个块级盒子水平排成一行 方式1：:使用block转inline-block（行内块元素） 1 <!-- 2 * @Author: invoker 3 * @Githu 阅读全文
posted @ 2021-07-13 18:28 kaer_invoker 阅读(39) 评论(0) 推荐(0)
CSS学习笔记(一)-16.盒子模型-盒子阴影
摘要：demo: 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 16:04:48 5 * @LastEditors: invoker 6 * @LastEditTi 阅读全文
posted @ 2021-07-13 16:14 kaer_invoker 阅读(93) 评论(0) 推荐(0)
CSS学习笔记(一)-15.border圆角的属性
摘要：1.border-radius:10px; 2.border-radius:50% 3.border-radius:10px 20px 30px 40px; 左上角，右上角，右下角，左下角。 4.border-radius:10px 20px; 表示左上角和右下角是10px，右上角和左下角是20px 阅读全文
posted @ 2021-07-13 15:57 kaer_invoker 阅读(157) 评论(0) 推荐(0)
CSS学习笔记(一)-14.盒子模型-案例
摘要：1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 15:23:35 5 * @LastEditors: invoker 6 * @LastEditTime: 20 阅读全文
posted @ 2021-07-13 15:48 kaer_invoker 阅读(54) 评论(0) 推荐(0)
CSS学习笔记(一)-13.盒子布局的案例
摘要：案例代码： 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-13 13:55:06 5 * @LastEditors: invoker 6 * @LastEditTi 阅读全文
posted @ 2021-07-13 15:14 kaer_invoker 阅读(94) 评论(0) 推荐(0)
CSS学习笔记(一)-10.盒子模型
摘要：网页布局三大核心：盒子模型，浮动，定位。 一、网页布局过程： 1.准备好相关的网页元素，一般都是盒子Box. 2.用CSS设置好盒子的样式，摆放盒子到相应的位置。（核心） 3.往盒子里放东西 二、盒子模型（box model） 把html页面中的布局元素看成一个矩形盒子，一个装内容的容器。 CSS盒 阅读全文
posted @ 2021-07-12 23:19 kaer_invoker 阅读(74) 评论(0) 推荐(0)
CSS学习笔记(一)-9.CSS三大特性
摘要：CSS三大特性：层叠性,继承性，优先级。 一、层叠性。 相同的选择器设置同属性的样式，值不同。即发生样式层叠冲突。 因此，CSS的原则是：哪个样式离元素最近，就展示哪个样式。 对于这段代码，显示的就是red颜色。 1 <!-- 2 * @Author: invoker 3 * @Github: ht 阅读全文
posted @ 2021-07-12 21:13 kaer_invoker 阅读(59) 评论(0) 推荐(0)
CSS学习笔记(一)-8.背景
摘要：一、背景色 默认元素都有背景色，只不过背景色是透明。 background-color: transparent; 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-1 阅读全文
posted @ 2021-07-12 18:37 kaer_invoker 阅读(52) 评论(0) 推荐(0)
CSS学习笔记(一)-7.小案例-导航侧边栏样式
摘要：1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-12 17:30:10 5 * @LastEditors: invoker 6 * @LastEditTime: 20 阅读全文
posted @ 2021-07-12 17:43 kaer_invoker 阅读(111) 评论(0) 推荐(0)
CSS学习笔记(一)-6.元素显示模式
摘要：元素显示模式有3种，块元素，行内元素，行内块元素，他们分别有自己的特点。 一、块元素 常见块级元素：h1-h6,p,div,ul,ol,li.典型的是div 特点： 1.独占一行。 2.高度，宽度，内外边距,自己设置。 3.默认宽度是父级容器宽度的100%，默认高度是盒子内部内容的高度。如果没有内容 阅读全文
posted @ 2021-07-12 17:29 kaer_invoker 阅读(144) 评论(0) 推荐(0)
CSS学习笔记(一)-5.复合选择器
摘要：学习视屏：https://www.bilibili.com/video/BV14J4114768 复合选择器就是基础选择器的组合 一、.后代选择器 后代选择器即父选择器选择子选择器或则孙子选择器。总之，选择后代。 1 <!-- 2 * @Author: invoker 3 * @Github: ht 阅读全文
posted @ 2021-07-09 23:13 kaer_invoker 阅读(58) 评论(0) 推荐(0)
CSS学习笔记(一)-4.CSS样式引入三种方式
摘要：学习视屏：https://www.bilibili.com/video/BV14J4114768 一、内部样式 即在Html中任意位置使用<style></style>标签，内部编写样式。 1 <!-- 2 * @Author: invoker 3 * @Github: https://github 阅读全文
posted @ 2021-07-09 21:27 kaer_invoker 阅读(99) 评论(0) 推荐(0)
CSS学习笔记(一)-3.文本外观属性
摘要：一、文本颜色 文本颜色使用color,有多种定义颜色的方式。 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-09 19:17:43 5 * @LastEditors 阅读全文
posted @ 2021-07-09 19:26 kaer_invoker 阅读(156) 评论(0) 推荐(0)
CSS学习笔记(一)-2.字体
摘要：一、字体 1.1字体的书法样式：font-family 1 <!-- 2 * @Author: invoker 3 * @Github: https://github.com/invoker2021 4 * @Date: 2021-07-09 17:49:26 5 * @LastEditors: i 阅读全文
posted @ 2021-07-09 18:14 kaer_invoker 阅读(31) 评论(0) 推荐(0)

1 2 下一页