【7.nth-of-type | nth-child?【CSS】】的更多相关文章

【css】清除浮动的几种方式

[css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid black; } .news img { float:left; } .news p { float:right; } <divclass="news"> <imgsrc="/img/news-pic.jgp"alt="my pic"/&…

【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏

在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea在IE中也存在一些样式上的缺陷了. 一个普通的,没有加不论什么定义的文本框.例如以下: <textarea cols="30" rows="3"></textarea> 其在IE的效果就如同左側一样.在没有输入不论什么文字,就出现垂直滚动栏非常不…

【css】用css巧妙实现移动端横向滑动展示功能

前言:记得以前处理移动端横向滑动展示都是去用js去解决的,要用js进行蛮多处理,要算li的宽度,然后还要用js设置ul盒子的宽度,又要设置最大滑动距离,最小滑动距离等等.......但是现在发现用css就能很好的解决这功能 一.直接上代码.   <!DOCTYPE html>   <html xmlns="http://www.w3.org/1999/xhtml">   <head>   <meta http-equiv="Conte…

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

  一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点.   说白了width:auto试图…

【CSS】iconfont的使用

说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式,下面我就分别说一下这个问题,让大家心里有一个概念: 一.TureTpe(.ttf)格式: .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有[IE9+,Firefox3.5+,Chrome4+,Safari3+,Oper…

【CSS】378- [译]44个 CSS 精选知识点

写在前面 一个周五的晚上,闲来无事整理下自己的 github(经常做收藏党),今天打算都过一遍,发现一个 star很高的项目,里面有大量的 CSS 片段,而且标题很诱人,然后又花了将近1个小时从头到尾过了一遍,其中一些是我们常用的一些知识点,另外也包含一些比较新的属性的应用,知识点挺多的,为了让大家看起来更方便些,然后又花了点(很长很长)时间翻译成中文. https://github.com/30-seconds/30-seconds-of-css 当然提前需要和作者沟通下得到作者的允许,作者希…

【CSS】css动画及过渡和变换属性

1.css动画 创建一个动画: @keyframes name{ //动画名字 0% { //动画开始 transform: translateY(0); } 100% { //动画结束 transform: translateY(-700px) rotate(600deg); } } 为元素绑定动画: animation: donghua 25s infinite linear;//参数分别为:动画名字,执行时间25秒,重复播放,匀速播放 设置动画延迟播放: animation-delay:…

【CSS】元素样式

1.使用CSS的三种方式: 方式一.通过元素的style属性来设置元素的样式 方式二.在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源,通常是一个CSS文件. 方式三.在HTML头部标签<head>中通过一对标签<style></style>来定义元素的样式 <!DOCTYPE html> <html lang="en"> <head> <meta char…

【CSS】318- CSS实现宽高等比自适应容器

点击上方"前端自习课"关注,学习起来~ 在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半. 于是我们就需要实现一个宽度自适应,高度为宽度一半的容器. 这里先以高度为宽度一半为例,也可以是其他任意比例. 一.思考如何实现 这个问题类似于:我们在移动端页面,上面有一张宽度 100% 的图片,如果我们没设置高度,则图片会根据原有尺寸,等比缩放. 我们可以借助这个想法,根据元素高度,来为元素设置一个相应比例的高度即可. 二.实现方法1…

【CSS】知识笔记

一.CSS文件 1.引用css文件,放在Head里面,可以减少repaint和reflow. 浏览器渲染页面大概是这样的,当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有CSS生成render tree来渲染页面,当遇到新的CSS的时候下载并结合现有CSS重新生成render tree,刚才的渲染工作就白费了,如果我们把所有CSS都放到页面顶部,这样就没有重新渲染的过程了. 2.一般只使用一个文件,这无关于网站的大小,网站越大,某种意义上这种做法的优势与潜力就会体现的…