蛐蛐的博客

css

关注

文章平均质量分 62

css

关注数：文章数：24 文章阅读量：19691 文章收藏量：18

作者: crayon-shin-chan

这个作者很懒，什么都没留下…

展开

专栏收录文章

css入门之CSS1、CSS2、CSS3、CSS4发展历程

CSS 最初于 1996 年发布，由用于添加字体属性的属性组成例如字体和文本的强调颜色、背景和其他元素。CSS2 于 1998 年发布，为其他媒体类型添加了样式，以便可以用于页面布局设计。CSS3 于 1999 年发布，其中添加了演示样式属性，允许从文档构建演示文稿。CSS3 将其规范划分为许多单独的模块，这使得 CSS3 更易于处理。借助 CSS3，设计人员现在可以使用自定义字体，例如 Google Fonts 和 Typecast 中可用的字体。在 CSS 和 CSS2，设计人员只能使用“网络安全字体”

原创 2022-07-11 22:12:21 · 2393 阅读 · 0 评论
响应式开发之viewport

文档：Responsive Web Design ViewportUsing the viewport meta tag to control layout on mobile browsers - HTML: HyperText Markup Language | MDNHow Do I Use Mobile Viewports for Responsive Experiences? | Adobe TargetCSS Device Adaptation Module Level 1Cho

原创 2022-05-07 19:12:25 · 200 阅读 · 0 评论
css入门之视觉格式化模型

文档：Visual formatting model - CSS: Cascading Style Sheets | MDN1.简介Visual Formatting Model描述了用户代理如何获取文档树，并显示它。文档树中的每个元素根据盒子模型生成零个或多个盒子。这些框的布局受以下约束：盒子尺寸和类型。定位方案（正常流动、浮动和绝对定位）。文档树中元素之间的关系。外部信息（视口大小、图像的内在尺寸等）。2.视口视口是浏览器窗口的查看区域。当视口大

原创 2022-03-21 20:35:56 · 404 阅读 · 0 评论
css入门之盒模型

文档：盒模型 - 学习 Web 开发 | MDN1.简介在 CSS 中，所有的元素都被一个个盒子包围着2.块级盒子一个display:block的元素是块级盒子一个块级盒子会表现出以下行为:盒子父元素的垂直方向扩展，大数情况下盒子会和父容器一样宽每个盒子都会换行 width 和 height 属性有用 padding , margin和border会将其他元素从当前盒子周围推开块盒子默认宽度为父元素的100%，默认高度为0<html>

原创 2022-03-21 19:55:48 · 472 阅读 · 0 评论
css入门之选择器

1.类型选择器类型选择器用于选择特定类型的元素，如 p 或者 h1 元素只需要写出元素名即可，也叫元素选择器<html> <head> <style> div { width: 100px; height: 100px; background-color: red; } ..

原创 2022-03-19 18:55:47 · 170 阅读 · 0 评论
css入门之块格式化上下文

文档：Block formatting context - Developer guides | MDN1.简介块格式化上下文是网页视觉 CSS 渲染的一部分。它是块框布局发生的区域以及浮动与其他元素交互的区域。2.定义块格式化上下文由以下情况创建：文档的根元素<html>。浮动，float不是none的元素。绝对定位的元素，position为absolute或fixed的元素。内联块，display为inline-block 表格单元格，d

原创 2022-03-13 16:37:23 · 701 阅读 · 0 评论
记一个mobile web开发url-bar-resizing问题

文档：https://developers.google.com/web/updates/2016/12/url-bar-resizing1.简介从chrome 56 开始，以视口单位（vh）定义的长度不会随URL 栏的显示或隐藏而调整大小。vh单位将根据视口高度调整大小，就好像 URL 栏始终处于隐藏状态一样。100vh将大于显示 URL 栏时的可见高度。也就是默认情况下100vh代表URL栏隐藏时的最大视口高度，而且不会随着URL栏改变而改变初始包含块是相对于父元素.

原创 2022-01-29 23:43:25 · 572 阅读 · 0 评论
记一个子元素float:left后父元素高度无法撑开的问题

1.简介当子元素使用float:left时，它会脱离正常的文档流既然它脱离了正常的文档流，而父元素还在正常的文档流中，那么它自然就无法撑起父元素的高度了<html> <head> <style> body > div{ } body > div > div{ float: left; ..

原创 2021-08-19 22:26:40 · 650 阅读 · 0 评论
css使用flex-shrink调整flex布局超出宽度

1.简介flex-shrink 属性指定了 flex 元素的收缩规则。flex-shrink仅在flex布局的子元素中起作用flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的依据是flex-shrink 的值。2.使用<html> <head> <style> .container{ overflow-x: scroll; ..

原创 2021-07-23 22:03:48 · 1748 阅读 · 0 评论
记一个css绝对定位时居中对齐问题

1.简介绝对定位时依靠top、bottom、left、right来在父元素下定位而如果使用百分比，则以父元素宽高进行计算如果想让元素居中对齐，只依靠这四个定位是做不到的2.实现 position: "absolute", bottom: "20px", left: "50%", transform: "translateX(-50%)",使用left与translateX配合，先定位到父元素的宽度百分之50处，然后向左移动自身宽度的百分..

原创 2021-07-19 22:00:10 · 629 阅读 · 0 评论
js+css实现横向滚动列表

1.简介现在需要实现一个横向滚动列表，即一个列表下有多个列表项，但是一次显示不出来所有的项当点击左右滚动按钮时，会向左向右滚动一格2.实现<html><head> <style> #container{ display: flex; flex-wrap: nowrap; overflow-x: scroll; ..

原创 2021-07-17 19:12:46 · 960 阅读 · 0 评论
使用window.matchMedia进行媒体查询

1.简介在dom中，window对象的matchMedia(querystring)方法返回一个MediaQueryList对象可以使用此对象判断当前页面是否与媒体查询字符串匹配使用此对象的属性和事件来检测匹配并监视这些匹配随时间的变化。2.使用<html><head></head><body> <script> var x = window.matchMedia("(max-wi..

原创 2021-07-17 00:13:19 · 616 阅读 · 0 评论
记一个响应式开发时页面左右移动问题

1.简介响应式开发时，页面宽度缩小到一定程度，页面可以左右拖动这是因为内部内容宽度超出了body、html元素2.解决html,body { overflow-x:hidden;}超出即隐藏

原创 2021-07-12 22:24:31 · 498 阅读 · 0 评论
记一个chrome下font-size不能小于12px问题

1.简介chrome下font-size设置小于12px时会无效，实际上还是12px2.解决 ["@media (max-width: 300px)"]: { transform: "scale(0.68)", }当媒体查询符合条件时，缩小字体缩小后实际占位还是原来大小，只是显示大小变小...

原创 2021-07-12 22:17:27 · 335 阅读 · 1 评论
记一个chrome自带input:-internal-autofill-selected背景色样式问题

1.问题chaome自带的user agent sheetstyle对input被自动填充后，有一个背景色设置：input:-internal-autofill-selected { appearance: menulist-button; background-color: rgb(232, 240, 254) !important; background-image: none !important; color: -internal-light-dar..

原创 2021-07-07 14:31:38 · 3606 阅读 · 0 评论
css入门之滤镜、透明度不应用于子元素

1.简介当我们使用filter、opacity等css属性时，会发现滤镜与透明的效果同时应用到了子元素，这是默认行为。其实大部分情况下，都希望这些效果只应用于父元素的背景（背景图、背景色）2.透明度与背景色一般是这样应用透明度的，即使用opacity：<style> .item{ width:100px; height:100px; background-color: green; op..

原创 2021-07-03 15:01:05 · 910 阅读 · 0 评论
css入门之filter滤镜

1.简介filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。2.语法filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();3.filter函数滤镜通常使用..

原创 2021-07-03 14:25:47 · 141 阅读 · 0 评论
css入门之background背景

1.简介background用于设置元素的背景色与背景图像，包含以下属性：background-color：背景色 background-position：背景图位置 background-size：背景图尺寸 background-repeat：背景图重复方式 background-origin：背景图定位区域 background-clip：背景的绘制区域 background-attachment：背景图像是否固定或者随着页面的其余部分滚动。 background-ima..

原创 2021-06-30 23:42:47 · 276 阅读 · 0 评论
记一个html页面双击出现文字出现蓝色背景问题

1.简介在页面文字上双击后，文字出现蓝色背景，非常难看2.解决/** 去除双击选中出现蓝色背景 */*{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none;}...

原创 2020-10-20 18:41:08 · 630 阅读 · 0 评论
div内部文字居中方案

1.line-heightine-height 属性设置行间的距离（行高）。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。<!DOCTYPE html><html lang="

原创 2020-09-21 21:22:31 · 1160 阅读 · 0 评论
css之flex弹性布局使用

1.简介Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex;}行内元素也可以使用Flex布局。.box{ display: inline-flex;}Webkit内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex;}注意，设为Fle

原创 2020-09-20 21:56:46 · 642 阅读 · 0 评论
css之div水平居中与垂直居中方案

1.margin实现水平居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <style> html,body { width: 100%; height: 100%; margin: 0;

原创 2020-09-20 15:08:31 · 237 阅读 · 0 评论
html5之Fullscreen全屏API

1.简介在HTML5中，新增一个Fullscreen API，其作用为将页面整体或页面中某个局部区域设为全屏显示状态。到目前为止，Firefox 10以上、Chrome 16以上、Safari 5.1以上、Opera 12以上版本的浏览器支持Fullscreen API。2.操作全屏 <div id="a"> <div > <div>webkit</div> .

原创 2020-09-19 23:01:14 · 1195 阅读 · 0 评论
css修改输入表单占位符placeholder样式

1.简介css提供了::placeholder伪类来修改表单placeholder占位符的样式，下面为不同浏览器使用的伪类名：浏览器样式名火狐、谷歌 ::placeholder 火狐 ::-moz-placeholder safari ::-webkit-input-placeholder IE :-ms-input-placeholder 2.2.使用...

原创 2020-09-15 20:02:54 · 570 阅读 · 0 评论