![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 60
httpkaidi
这个作者很懒,什么都没留下…
展开
-
CSS定位position(子绝父相)
CSS之定位定位与浮动的区别:浮动:可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子定位:可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置,并且可以压住其他盒子定位的组成定位=定位模式+边偏移定位模式 position选择器 {position : 属性值;}position有四个属性值:1.**static:静态定位,**没有特殊的定位规则,遵循正常的文档流对象(极少使用)2 relative:相对定位,相对于元素自身进行定位(参照物为元素原来的位原创 2021-11-30 10:22:21 · 750 阅读 · 0 评论 -
常见图片格式及简单切图操作
常见的图片格式jpg图像格式:JPEG (JPG)对色彩的信息保留较好,高清,颜色较多,产品类的图片经常用jpg格式的.gif图像格式:GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果png图像格式是一种新兴的网络图形格式,结合了GIF和JPEG的优点,具有存储形式丰富的特点,能够保持透明背景.如果想要切成背景透明的图片,请选择png格式..PSD图像格式PSD格式是Photoshop的专用格式,里面可以存放图层、通道、遮原创 2021-11-30 10:21:13 · 488 阅读 · 0 评论 -
CSS浮动-浮动的使用/清除浮动
CSS浮动CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。Float(浮动),往往是用于图像,但它在布局时一样非常有用。网页布局准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘!!!浮动特性(重要):脱离标准普通流的控制(浮)移动到指定位置(动),(俗称“脱标”)浮动的盒子不再保留原先的位置如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并原创 2021-11-30 10:19:44 · 82 阅读 · 0 评论 -
CSS盒子模型布局及样式
盒子模型CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域,内边距是透明的。Content(内容) - 盒子的内容,显示文本和图像。关于border(边框):bo.原创 2021-11-29 12:44:32 · 238 阅读 · 0 评论 -
CSS三大特性/层叠性/继承性/优先级(权重)
CSS三大特性层叠性,继承性,优先级层叠性层叠性主要用来解决样式冲突问题层叠性原则:1.样式冲突,遵循就近原则,哪个样式离结构近,就执行哪个样式(覆盖)2.样式不冲突,不会层叠继承性子标签会继承父标签的某些样式,如文本颜色和色号(主要是继承文字方面的样式)行高的继承:body{font:12px/1.5 Microsoft YaHei;}此处 12px/1.5 即 body内所有子元素的行高为当前文字大小12px的1.5倍此种方法优势:里面的子元素可以根据自己文字.原创 2021-11-29 17:00:00 · 80 阅读 · 0 评论 -
CSS的元素显示方法(块、行内元素)及背景属性
CSS的元素显示方法元素显示模式:即元素(标签)以什么方式进行展示1.块元素常用有<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>等,<div>最典型特点:比较霸道,自己独占一行高度,宽度,外边距,内边距都可以控制宽度默认为容器(父级宽度)的100%是一个容器及盒子,里面可以放行内或块级元素1.文字类的元素不能使用块元素2.<p>标签主要用于存放文字,因此&l原创 2021-11-29 12:35:17 · 968 阅读 · 0 评论 -
CSS复合选择器
后代选择器(重要)后代选择器(descendant selector)又称为包含选择器。后代选择器可以选择作为某元素后代的元素。语法结构:元素1 元素2 { 样式声明 } /*选择元素1里面的所有元素2*/例:ol li{ color: pink }元素1与元素2之间用空格分开。 元素1与元素2可以是任意基础选择器 元素1是父级,元素2是子集,被选择的是元素2 元素2可以是儿子,也可是孙子,只要是元素1的后代均可选择,可以一层一层继续选择下去 也可选择已有元素类下的原创 2021-11-29 16:45:00 · 44 阅读 · 0 评论 -
Emmet语法及设置
Emmet语法用于提高html/css编写速度(适用于VS Code)快速生成HTML结构1.生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成<div></div>2.如果想要生成多个相同标签加上就可以了比如div3就可以快速生成3个div3.如果有父子级关系的标签,可以用>比如ul> li就可以了4.如果有兄弟关系的标签,用+就可以了比如div+p5.如果生成带有类名或者id名字的,直接写.demo或者#two tab键就可以了6原创 2021-11-29 12:18:07 · 221 阅读 · 0 评论 -
chrom调试工具使用
Chrom调试工具打开调式工具方法按F12键右击,选择检查使用调式工具方法选择 Elements1.ctrl加滚轮 放大缩小代码2.左边为HTML元素,右边为CSS元素3.右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色4.ctrl+0 复原浏览器大小5.若点击元素,发现右侧没有样式引入,可能是类名或者样式引入错误6如果由样式,但样式前面有黄色感叹号出现,说明样式属性书写错误...原创 2021-11-29 12:10:47 · 101 阅读 · 0 评论 -
CSS选择器/字体属性/文本属性/引入方式
CSS简介CSS:层叠样式表,也是一种标记语言,用于美化网页 。最大价值:让结构(html)和样式(CSS)相分离CSS语法规范:由选择器以及一条或多条声明组成<style> /*选择器 {样式}*/ /*给谁改样式{改什么样式}*/ p{ color: red; font-size: 12px; } </style>属性与属性值间以键值对形式出现原创 2021-11-29 12:09:44 · 88 阅读 · 0 评论