CSS学习笔记
文章平均质量分 77
椰果uu
严于律己 软件工程普本大三 记录自己前端学习路程,后续也会分享自己的求职历程,分享自己的经验和心得
展开
-
3、flex弹性盒布局(flex:1?、水平垂直居中、三栏布局)
任何一个容器都可以指定为 Flex 布局。块元素,行内元素即可。div{span{注意,设为 Flex 布局以后,子元素的floatclear和属性将失效。原创 2024-06-02 17:14:20 · 2183 阅读 · 0 评论 -
2、浮动的用法特点,解决父元素高度塌陷解决
5、当浮动元素遇到了文字,浮动元素不会覆盖文字, 文字会环绕在浮动元素的周围,从而有文字环绕图片的效果。6、当元素设置浮动以后,会完全脱离文档流,元素脱离文档流后, 元素原来在文档流得特点,就都没有了,也就是说不再区分块,行内,行内块。1、一旦元素设置了浮动,元素就会脱离文档流,它原来在文档流得位置, 就会被它下面的元素挤上来。子元素都设置了浮动,父元素没有高度,导致父元素高度塌陷,无法自动的根据子元素撑开高度。2、如果浮动元素它上面的元素不浮动,则浮动元素无法上移。4、浮动元素不会超出它的父元素。原创 2024-06-02 15:09:49 · 580 阅读 · 0 评论 -
1.盒模型及其应用(溢出、外边距塌陷)
怪异盒模型又称IE盒子模型,怪异盒子模型的 width 或 height 等于 content + padding + border 的宽或高。设置的 width 和 height 决定了盒子的大小,设置 border 和 padding 只会压缩 content。小结:怪异盒子模型的宽高是定死的,设置 padding 或 border 不会影响页面布局。的大小,设置 padding 和 border 会把盒子撑大,margin 不会。样式设置:box-sizing: border-box;原创 2024-06-02 13:55:46 · 829 阅读 · 0 评论 -
HTML5+CSS3回顾总结
(1)get 方法的特点 使用 URL(统一资源定位符)传递参数:http://服务器地址?name1=value1&name2= value2,其中“?”符号表示要进行参数传递,“?”符号后面采用“name=value”的形式传 递,多个参数之间,用“&”符号连接。URL 传递的数据量有限,只能传递少量数据。而且使用 URL 传递参数并不安全,所有信息可在地址栏中看到,并且可以通过地址 栏随意传递其他数据。原创 2024-06-01 19:12:43 · 920 阅读 · 0 评论 -
品优购项目制作(html5+css3)
因为首页的头部和尾部在其他页面中是一样的,所以这两部分我们要把样式写到公共common.css里。原创 2023-10-23 21:03:12 · 909 阅读 · 0 评论 -
项目前的准备工作:书写规范、CSS初始化、faction图标制作、SEO优化
●有些样式和结构在很多页面都会出现,比如页面头部和底部,大部分页面都有。此时,可以把这些结构和样式单独作为一个模块,然后重复使用。●这里最典型的应用就是common.css公共样式。写好一个样式 ,其余的页面用到这些相同的样式。(2)使用转换工具转换成ico图标,网址:https://www.bitbug.net/(1)把图标从psd文件中抠出来一个png格式的文件。common.css公共样式里面包含。版心宽度、清除浮动、页面文字颜色。(4)在页面源文件的标签之间插入。原创 2023-10-14 19:24:09 · 91 阅读 · 1 评论 -
CSS3新增特性
●新增的CSS3特性有兼容性问题, ie9+才支持●移动端支持优于PC端●不断改进中●应用相对广泛编辑●现阶段主要学习:新增选择器和盒子模型以及其他特性。原创 2023-10-10 20:57:58 · 58 阅读 · 1 评论 -
vs code代码格式化(prettier-code formatter)
设置》用户》扩展》prettier。原创 2023-10-09 17:19:39 · 467 阅读 · 3 评论 -
CSS学习笔记5:定位
1. -定记住相对定位、固定定位、绝对定位两个大的特点: 1. 是否占有位置(脱标否) 2.以谁为基准点移动位置。2.学习定位重点学会子绝父相。通过盒子模型,清楚知道大部分html标签是一个盒子。通过CSS浮动、定位可以让每个盒子排列成为网页。一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。1.标准流可以让盒子.上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。2.浮动可以让多个块级元素-行显示或者左右对齐盒子,原创 2023-09-23 18:00:56 · 103 阅读 · 1 评论 -
CSS学习笔记5:学成在线案例
●1 号是版心盒子header 1200* 42的盒子水平居中对齐,上下给一个margin 值就可以●版心盒子里面包含 2号盒子logo●版心盒子里面包含3号盒子nav导航栏●版心盒子里面包含4号盒子search搜索框●版心盒子里面包含5号盒子user个人信息●注意:要求里面的4个盒子必须都是浮动先写一个大盒子来存放头部。CSS样式CSS样式。原创 2023-09-21 12:19:42 · 107 阅读 · 0 评论 -
CSS学习笔记4:浮动
浮动原创 2023-09-07 16:30:43 · 99 阅读 · 0 评论 -
CSS学习笔记3:CSS三大特性、盒子模型
1、层叠性样式冲突的情况下,遵循就近原则。比如下面,颜色显示为粉色,但是字体大小为14px。2、继承性继承父元素的某些样式,(包括font-/text-/line-以及color)但并不是全部样式。3、优先级案例:1、2、a标签的特殊性4、5、若想把第一个Li改为粉色,怎么办呢显然,用li直接定义样式是不可行的,可以在第一个li标签加上class标签,这样组成复合选择器的权重就是20。原创 2023-08-29 15:43:17 · 86 阅读 · 1 评论 -
CSS学习笔记2:Emmet语法、复合选择器、元素显示样式、背景属性等
1、这里简单总结一下快速生成HTML语法的快捷键:2、快速生成CSS语法的快捷键:可以直接缩写再按tab键,例如w500=width: 500px;3、自动格式化代码,可以去vscode的设置里面打开下图两个选项:语法: 实例:若只想把ul中的li标签变成红色,a标签变成绿色,显然用标签选择器无法做到,用类选择器又太繁琐,这时我们可以用后代选择器。空格是后代选择器的最明显标志。 若此时有两个ul标签,但是只想选择第一个ul标签中的li和a,该怎么办呢此时只需要给第一个ul加上类名,clas原创 2023-08-04 18:19:20 · 168 阅读 · 0 评论 -
CSS学习笔记1:选择器,字体、文本属性,引入方式
严于律己!(一)简介CSS是层叠样式表的简称,CSS是一种标记语言。用于美化HTML,布局网页。(二)语法规范构成:选择器以及一条或多条声明。原创 2023-08-03 17:38:55 · 98 阅读 · 0 评论