css相关问题

【web前端面试题整理03】来看一点CSS相关的吧

前言昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了,各位也可以作答题目一览 1.<img>标签上title属性与alt属性的区别是什么?2.分别写出以下几个HTML标签:文字加粗.下标.居中.字体3.写出一个文本输入框,属性为只读,最大输入字符为20个4.CSS左边固定,右边可变的布局实现方法:要求在源码顺序中左边必须在前.5.图片和文字一起如何…

IE的CSS相关的BUG(整理一)

本来不想弄这个ie的bug的,真的很想让它快点死掉,可是事与愿违啊,没办法,还是贴出来,以备自用. 这个网页(http://haslayout.net/css/index)上例举了所有的IE和CSS相关的BUG.如果你在开发网页的时候,你需要看看. 目前,这个网站上包含了 28 个“普通的Bug” , 4 个“布局方面的Bug” ,6 个“可以绕开的Bug” 以及 1 个“IE崩溃的Bug”,所有的这些Bug有39个指南和48个解决方法.这个列表目前更新到 2009年8月11日,19:50:22…

Css相关用法个人总结

Css相关用法个人总结…

【经验之谈】前端面试知识点总结（CSS相关）——附答案

目录二.CSS部分 1.解释一下CSS的盒子模型? 2.请你说说CSS选择器的类型有哪些,并举几个例子说明其用法? 3.请你说说CSS有什么特殊性?(优先级.计算特殊值) 4.要动态改变层中内容可以使用的方法? 5.常见浏览器兼容性问题与解决方案? 6.列出display的值并说明他们的作用? 7.如何居中div, 如何居中一个浮动元素? 8.CSS中 link 和@import 的区别是? 9.请列举几种清除浮动的方法(至少两种)? 10.block,inline和inlinke-block…

前端知识点-CSS相关知识点

1.解释一下CSS的盒子模型? 回答一: a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度 b.网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. c.这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 回答二:…

css相关tips

12px的中文占据16px高度,英文占据14px的高度.所以做双语版网页时css样式要做相应调整. IE10,IE11浏览器当点击input text文本框时,输入文本后出现一个删除功能的X按钮. 去掉input text文本框后的X按钮的方法:给input text添加如下CSS input::-ms-clear{ display:none; } //提示:input后是两个冒号,伪元素需要两个冒号. readonly :不可编辑,不可获得焦点,背景颜色默认透明,字体颜色默认为前景色黑色,值可…

走近webpack（4）--css相关拓展

我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求. 下面,咱们一起来学学如何用webpack来处理less,sass等预编译器.先看看如何用webpack处理less. 国际惯例,第一步是安装: npm install less less-loader --save-dev 第二步,配置loader项: { test: /\.less$/, use: [{ loader: "st…

css相关整理-其他

1.设备像素(device pixel): 设备像素是物理概念,指的是设备中使用的物理像素.CSS像素(css pixel): CSS像素是Web编程的概念,指的是CSS样式代码中使用的逻辑像素.通过设备像素比,便可得知设备像素与CSS像素之间的比例.当这个比率为1:1时,使用1个设备像素显示1个CSS像素.当这个比率为2:1时,使用4个设备像素显示1个CSS像素,当这个比率为3:1时,使用9(3*3)个设备像素显示1个CSS像素<img srcset="small.jpg 450w ,l…

2019.4.18 HTML + CSS相关整理

目录标签块标签行标签行块转化嵌套规则 css引入方式行间样式内部引入外部引入选择器基础选择器组合选择器盒模型 css样式字体属性设置字体的大小设置字体的粗细设置字体的风格设置不同类型的字体 font简写文字的对齐缩进下划线水平对齐间距设置圆角鼠标样式和链接点击样式调整鼠标样式为链接点击样式(小手) 链接没有被访问时的颜色链接被访问过之后的颜色鼠标悬停时链接的颜色鼠标点击时链接的颜色背景背景颜色背景图片背景平铺背景是否滚动背景绘制…

react中关于create-react-app2里css相关配置

先看 webpack.config.dev.js 里的相关代码: // style files regexes const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; // common function to get style loaders…

Css 相关资源（本篇不定期更新）

http://www.tuicool.com/articles/3eaINn---<终于搞懂了CSS实现三角形图标的原理>---☆☆☆☆☆.这篇讲的是css中的如何挤出一个三角形,这个讲的简单易懂,而且比较全面,这个我给五颗星,棒棒哒!…

display:none和visibility:hidden的区别? 前几天遇到的这个问题,表格布局:::::display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢, 就当他从来不存在. visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间. CSS中 link 和@import 的区别是? (1) link属于HTML标签,而@import是CSS提供的: (2) 页面被加载的时,link会同时被加载,而@import引用的C…

编写css相关注意事项以及小技巧

一.小技巧 1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯): ;;} body{font-size:16px;} img{border:none;} li{list-style:none;} input,select,textarea{outline:none;border:none;background:none} textarea{resize:none;} a{text-decoration:none;} /*清除浮动*/ .clearfix:after{cont…

CSS 相关知识总结

1 什么是CSS? CSS全称(Cascading Style Sheets)是一门指定文档该如何呈现给用户的语言. 2 为何使用CSS? CSS 文档信息的内容和如何展现它的细节想分离,文档细节即为样式(style).你可以将样式与内容进行分离出来,以便我们能够避免重复更容易维护为不同的目的,使用不同的样式而内容相同 3 CSS 如何工作的? 浏览器在展示一个文档内容的时候,必须要把文档和样式信息结合起来展示.这个处理过程一般分为两个阶段: 1 浏览器先将标记语言和CSS转换成DOM(文…

css相关细节优化备忘

<p>标签不能再包含<p>,也不能包含<div>,<div>可以包含<p> a 和 img 标签是特殊的行内元素,a标签可以包含div等,几乎所有的可替换元素都是行内元素,例如<img>.<input>等等,替换元素一般有内在尺寸,所以具有width和height,可以设定.例如你不指定img的width和height时,就按其内在尺寸显示,也就是图片被保存的时候的宽度和高度. 对于表单元素,浏览器也有默认的样式,包括宽度…

前端面试题：css相关面试题

CSS 选择器中,元素选择器和类选择器的区别是什么? 元素选择器是最常见的 CSS 选择器,即,文档的元素就是最基本的选择器.选择器通常是某个 HTML 元素,比如 <p>.<h1>.<em>.<a>等,甚至可以是 <html> 元素本身. 类选择器用于将样式规则与附带 class 属性的元素匹配,其中该 class 属性的值为类选择器中指定的值.使用类选择器时,首先需要定义样式类,其语法为: .className { } 所有能够附带 clas…

CSS相关

===CSS框架=== https://github.com/lucasgruwez/waffle-grid 一个易于使用的 flexbox 栅格布局系统 ===CSS初始化=== https://github.com/necolas/normalize.css ===CSS动画=== https://github.com/blivesta/animsition https://github.com/daneden/animate.css https://github.com/ai/easing…

webpack配置css相关loader注意先后顺序

一.问题描述在webpack3中,引入animate.css失败. 二.问题分析 1.难道是入口main.js引用方式不对? import animate from 'animate.css' 2.难道是postcss配置文件不对? //postcss.config.js module.exports = { plugins: [ require('precss'), require('autoprefixer') ] } 3.难道是webpack配置文件不对? //webpack.dev.c…

查询css相关属性的网站

mozalla developer netwoke https://developer.mozilla.org/zh-CN/docs/Web/CSS/background 布局,div+css:http://www.divcss5.com/shouce/…

css相关知识点

一.CSS的引入方式 1.1 css的介绍 HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本是css3,我们目前学习的是css2.1 1.2 css和html比较: 1)htm…

CSS相关博客

1. CSS浮动(float,clear)通俗讲解:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 2. CSS position属性和实例应用: http://www.cnblogs.com/bokin/archive/2012/12/14/2816864.html http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html http://blog.j…

CSS相关知识和经验的碎片化记录

1.子DIV块中设置margin-top时影响父DIV块位置的问题解决办法1:若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法2:在子DIV块中用padding-top代替margin-top. 2.在IE浏览器上div元素块不能对ActiveX控件界面进行遮挡的问题解决办法:在div元素块中添加子元素iframe,并设置其相应的样式和属性,如: <div id="preLoadMask" class="ui_…

css相关知识

display: block; "块级元素". display: inline; "行内元素". display: none; "在不删除元素的情况下,隐藏元素,不会占据它本来显示的空间" visibility: hidden; "隐藏元素,但是会占据空间" tip:CSS最重要的控制布局的属性display. tip:每个元素都有一个默认的display属性,与类型无关,并且随时都可以重写它. tip:块级元素会新开一行,并…

webpack.config.js====CSS相关：插件optimize-css-assets-webpack-plugin

1. 安装:主要是用来压缩css文件 cnpm install --save-dev optimize-css-assets-webpack-plugin cssnano 2. webpack.config.js配置 const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin'); //压缩css插件配置 new optimizeCssAssetsWebpackPlugin() //暂时不起作用…

webpack.config.js====CSS相关：css和scss配置loader

1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev //loader加载器加载css和less模块 cnpm install style-loader css-loader less less-loader --save-dev //样式抽离文件如果是webpack4.X 需要加@next //现在webpack4.x支持mini-css-ext…

webpack.config.js====CSS相关：postcss-loader加载器，自动添加前缀

1. 在webpack中加载css需要先安装style-loader 和 css-loader cnpm install --save-dev style-loader css-loader 2. 在webpack中使用postcss自动添加厂商前缀: cnpm install postcss-loader autoprefixer --save-dev 3. webpack.config.js中使用 const extractTextWebpackPlugin = require('extra…

【前端知识体系-CSS相关】CSS工程化方案

1.如何解决CSS的模块化问题? 使用Less,Sass等CSS预处理器使用PostCSS插件(postcss-import/precss) 使用webpack处理CSS(css-loader + style-loader) 2.PostCSS是什么? PostCSS是一个平台,具体要取决于这个平台上面的插件可以做什么常用的插件如下 // 1. 可以添加属性前缀,适应所有的浏览器 const autoprefixer = require('autoprefixer'); // 2. 将所有的…

【前端知识体系-CSS相关】Bootstrap相关知识

1.Bootstrap 的优缺点? 优点:CSS代码结构合理,现成的代码可以直接使用(响应式布局) 缺点:定制流程较为繁琐,体积大 2.如何实现响应式布局? 原理:通过media query设置不同分辨率的class 使用:为不同分辨率选择不同的class 3.如何定制自己的bootstrap样式? 使用CSS同名类覆盖(门槛低,见效快,可能会有bug) 修改源码重新构建(一次性彻底解决) [ bootstrap.scss是入口文件,修改这个文件内容之后,使用node-sass重新编译scss文…

【前端知识体系-CSS相关】CSS预处理器

1.常见的CSS预处理器有哪些? [!NOTE] css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CSS更加简洁.适应性更强.可读性更佳,更易于代码的维护等诸多好处 Sass(Scss):2007,ruby编写 Less: 2009,js编译 1.1 使用流程? 基于CSS的另外一种语言通过工具编译成CSS 添加了很多CSS不具备的特性同时CSS文件的组织方式 1.2 预处理器的作用有哪些? 帮…

【前端知识体系-CSS相关】CSS特效实现之Transition和Transform对比

CSS效果 1.使用div绘制图形(三角形)? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .triangle-top { width: 0; height: 0; border-width: 0 40px 40px; border-style:…

【css相关问题】的更多相关文章