css width为当前可见宽度

2024-10-27

CSS中的各种width（宽度）

一 window对象的innerWidth.outerWidth innerWidth是可用区域的宽度(内容区 + 滚动条) outerWidth是浏览器窗口的宽度(可用区域的宽度+审查元素区域的宽度) 二 HTMLELement对象的offsetWidth.clientWidth.width width是纯内容区 clientWidth是纯内容区+补丁 offsetWidth是纯内容区+补丁+边框+滚动条说明: 1 桌面版浏览器(chrome.Safari)的滚动条占用HTMLElement

JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在JQuery中 .width返回的是:元素内容width + padding + border. .css('width')返回的是:元素内容width + 单位. 其实这2个函数分别对应,两种理解元素宽度的方式. content-box : 元素的宽度就是内容的宽度,不包括 padding 和 bo

CSS无序列实现表宽度自适应的表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS无序列实现表宽度自适应的表格_网页代码站(

jQuery.width()和jQuery.css('width')的区别

[TOC] 问题描述使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '10rem')时却能正确,简单得查阅了下jQuery文档,发现文档里面对$.fn.width的描述是: val为空时是取得第一个匹配元素当前计算的宽度值(px),val不为空时是设置宽度,可以是字符串或者数字,还可以是一个函数. 刚开始还以为是$.fn.width只支持px,对rem支持不好,后来跟踪了一下源码发现想法错了

CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;

width() innerwidth() outerwidth() css('width')

不多说,用一图足以说明首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的元素 ,他们的作用相同.比如网页上有一个 div 元素: <div style="width:200px;height:200px;"></div>我们可以使用: $(function(){ var width1 = $("div"

DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐心的直接看最后解答. 1. 我的第一反应: <div style="width:500px;"> <div id="px1" style="float:left; height:100px; width:150px; background-c

区分width()、css('width')、innerWidth()

#widthTest1 { width: 200px; height: 200px; background-color: #00CCFF; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; border: 5px solid red; } #widthTest2 { margin-top: 30px; width: 200px; height: 2

CSS如何让DIV的宽度随内容的变化

[css]CSS如何让DIV的宽度随内容的变化让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inline; }

详解 $().css('width')和$().width()的区别

在本次项目开发中,经常用jquery获取高度和宽度并且动态加载,有时候用$().css('width')或$().width()这两个方法获取宽度并设置,但是有时候出现获取不到的情况,查阅资料后发现他俩之间即相同又不同. 概念: 1.$().css() 在w3c jQuery的文档中,$().css()方法设置或返回被选元素的一个或多个样式属性.$().css()在设置多个属性时,可以采用对象的形式,但值是字符串的形式(我都经常忽略而出问题). 2.$().width() width()函

pc浏览器css和js计算浏览器宽度的差异以及和滚动条的关系

如图: css宽度:1250 不包括滚动条宽度用控制台箭头选取元素显示的左边的宽度:1250 不包含滚动条宽度缩放浏览器右上角显示的宽度:1267 包含了滚动条宽度再看下控制台: 由此可计算浏览器滚动条宽度为: window.innerWidth - $(window).width() window.innerWidth: 包含滚动条的宽度 $(window).width(): 不包含滚动条宽度 document相关的方法都不包含滚动条宽度总结: 包含滚动条的只有两个: window

jquery .width和css("width", )区别

1.$.fn.width会根据是否是borderBox来计算新的宽度,如果是borderBox,会额外加上padding和border的宽度,计算时只是按照px来,用rem做单位会出错: 2.$.fn.width返回的是不带单位的number类型,$.fn.css("width")返回的是带单位的字符串: 3.$.fn.width可以计算window和document的宽度,$.fn.css("width")不行.

CSS流体(自适应)布局下宽度分离原则——张鑫旭

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言之前曾作有“页面重构鑫三无准则之无宽度准则”一文,属于流体布局系列中的偏理论性的文章,本文也是这种性质的,可谓是“无宽度准则”一文的延续. “无宽度准则”是说内部元素不要定宽,但是,除非你的页面是像google的产品页面一样都是100%自适应的,那么页面的终归会有一个固定的宽度值,一般出现在页面的

CSS流体(自适应)布局下宽度分离原则

CSS流体(自适应)布局下宽度分离原则这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言之前曾作有“页面重构鑫三无准则之无宽度准则”一文,属于流体布局系列中的偏理论性的文章,本文也是这种性质的,可谓是“无宽度准则”一文的延续.

第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法一．DOM 简介由于课程是基于 JavaScript 基础上完成的,这里我们不去详细的了解 DOM 到底是什么. 只需要知道几个基本概念: 1.D 表示的是页面文档 Document.O 表示对象,即一组含有独立特性的数据集合.M 表示模型,即页面上的元素节点和文本节点. 2.D

CSS，让100%的宽度，自动减10，让100%的高度，自动减10，可以加减乘除

CSS,让100%的宽度,自动减10,让100%的高度,自动减10,可以加减乘除实例: .add{ width: calc(100% - 10px); height: calc(100% - 10px); } .main{ width: calc(100% - 10px - 10px); height: calc(500px - 10px -50px); } 注意,减号,左右必须打空格,否则不生效. calc用于动态计算长度值. 需要注意的是,运算符前后都需要保留一个空格,例如:width:

JQuery .width()/.css("width")方法比较

1. 获取到的值的区别获取到的为实际宽度,不包括内边距和边框: <div id="aa"> ...... </div> // 1. width() ---- 得到的值为具体的数值,如:300,500 ; $("#aa").width( ); // // 2. .css("width"); ---- 得到的值为带px的字符串,如:'300px','500px' ; $("#aa").css(&q

css居然有根据容器宽度自动截取长度加省略号功能，强大!!

作者:☆威廉古堡♂ 项目中最初的做法(js截取): //字符长度截取包括中英文混合 function subStr(str, len) { str = str.toString(); var newLength = 0; var newStr = ""; var chineseRegex = /[^\x00-\xff]/g; var singleChar = ""; var strLength = str.replace(chineseRegex,"**&

css width height

css 中body 的默认宽度是100%,但是默认高度为0px

css width="100" style ="width:100px" 区别

1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. style ="width:100px"优先级较高 3. 只有有限的元素支持width="100"属性,例如table, td等 4. JQuery中获取width如下 <div style="width:200px;height:200px;"

CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime;} #right { float: right; width: 200px; background: lime;} #center { margin:0 200px; background: blue} html: <div id="left">left</div>

css width为当前可见宽度

热门专题