guolulu66-CSDN博客

转载 CSS background-origin属性

我在讲解background-position属性时引出了背景图片坐标系的应用。当时说背景图片是相对于坐标原点定位的，而这个坐标原点就位于border-box区域的左上起点，其实这是不严谨的。因为那是默认情况下，而这里要讲解的background-origin属性就是控制这个坐标原点的位置的。 Origin有“起源”的意思，而background-origin就有“背景图片起点”的意思。它是告诉浏览器background-position是相对于哪里定位的。有人会想到background-repeat属性

2020-10-13 09:26:15 1060

原创 absolute和fixed的区别

fixed:固定定位 absolute:绝对定位区别很简单： 1、没有滚动条的情况下没有差异 2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动常用场合： 1.fixed固定定位，只针对浏览器窗口定位，上下左右，不会随着窗口大小改变，固定不变，例如固定位置的小广告，常用于网站边缘的公司联系方式和快速回到顶部 2.absolute绝对定位，脱离文档流，没有父元素，上下左右设置是针对于浏览器窗口，不占据位置，会随着窗口大小与页面一起改变 ...

2020-10-13 08:47:47 792

转载巧妙运用clip-path，实现CSS形状变换

CSS3的“clip-path”，这个“clip-path”看起来有点眼熟，因为它原本就存在于SVG里头，利用掩码（剪裁）的方法，连接坐标绘制掩码区域，就可以做出许多不同的形状，让底色或底图显现，随着浏览器对于CSS3的支持度大幅提升，自然而然的就可以用它来做些与众不同的变化。运用clip-path超强的网站最先看到这个属性的应用，是从这个网站看到的：species-in-pieces.com/，不得不说这个网站做得实在太神了，一开始看到还真以为是用SVG做的，没想到竟然是用CSS刻出来的…真是太惊人啦

2020-10-13 08:09:03 689 1

原创两种属性选择器的区别

[attribute~=value] 用于选取属性值中包含指定独立单词的标签。 <p title="我是首富">我是马云</p> <h1 title="我是">我是马化腾</h1> <h2 title="我是吗">我是李彦宏</h2> <h2 title="我是吗李想">我是李想</h2> css代码如下： [title~="我是"]{ background: blue; border:

2020-10-09 22:37:57 419

转载 css样式的书写顺序及原理——很重要！

记得刚开始学习前端的时候，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的一种方式。那么是怎么个顺序呢？（1）定位属性：position display float left top right bottom overflow clear z-index （2）自身属性：width height padding border margin backg

2020-10-08 22:12:26 260

原创 HTML元素margin、padding的默认值

HTML元素margin、padding的默认值 element margin(单位像素) padding的默认值 html 0 0 body 8 0 div 0 0 h1 21 0 h2 19 0 19 0 0 h3 18 0 18 0 0 p 16 0 16 0 0 ul 16 0 16 0 0 0 0 40 li 0 0 td 0 1 dl 16 0 16

2020-10-08 22:03:46 1619

原创 CSS中的继承

CSS中的继承一、无继承性的属性二、有继承性的属性三、所有元素可以继承的属性四、内联元素可以继承的属性五、块级元素可以继承的属性继承：子元素继承父元素的样式，但是并不是所有属性都是默认继承的。通过文档中的 inherited：yes 来判断属性是否可以继承，关于继承可以参见css的继承关键字：一、无继承性的属性 1、display：规定元素应该生成的框的类型 2、文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow：文本阴

2020-10-08 21:50:13 182

原创块级元素、行内元素、行块级元素

块级和行内元素的简单认识标签分为两种等级：行内元素和块级元素的区别：行内元素：块级元素：块级元素和行内元素的分类：在HTML的角度来讲，标签分为：从CSS的角度讲，CSS的分类和上面的很像，就p不一样：标签分为两种等级： 1，行内元素。　　 2，块级元素。行内元素和块级元素的区别：行内元素：与其他行内元素并排不能设置宽高，默认的宽度就是文字的宽度块级元素：霸占一行，不能与其他任何元素并列

2020-09-21 08:50:31 3033

转载 CSS的inline、block与inline-block

基本知识点基础知识点一、行内元素与块状元素之间的转换1. float: 当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。2. position: 当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。3 .display:(1)、块级标签转换为行内标签：display:inline;(2)、行内标签转换为块级标签：display:bl

2020-08-30 15:46:11 366

guolulu66的博客